스크롤하는 동안 표 내부의 이미지가 탐색 목록 항목과 겹치다

Question

. 첨부 된 스크린 샷을 참조하십시오. HTML, CSS3, Javascript를 사용하여 작은 웹 사이트를 개발하고 있습니다. 요구 사항에 따라 테이블에 이미지를 추가했는데 문제없이 제대로 표시됩니다. 그러나 스크롤하는 동안 상단 고정 탐색 모음 (UL> LI 요소가 수평으로 채워짐)과 겹칩니다. HTML을 처음 접했을 때 탐색 바 메뉴 뒤에 이미지를 밀어 넣을 Z- 속성이 있는지 알고 싶습니다.

HTML 코드 :

Z- 색인 1리스트 아이템을 가지고있다 헤더의 상위 DIV 추가되어야

<table class="color-menu-content-table"> 
    <tbody> 
    <tr> 
    <td> 
    <table class="color-menu-content-table"> 
    <tbody> 
     text content goes here 
    </tbody> 
    </table> 
    </td> 
    <td style="vertical-align:center;"> 
    **<img src="myglobe.jpg" style="border-radius:8px;opacity:0.9;">** 
    </td> 
    </tr> 
    </tbody> 
</table> 
myglobe.jpg image is overlapping 

CSS3 Code: 
.color-menu-content-table{ 
    width: 100%; 
    height: 100%; 
    border-style: double; 
    border-collapse: collapse; 
    border: 1px solid green; 
    vertical-align: middle; 
    table-layout: fixed; 
} 

Answer 1

- "HERE 제목 3", "여기 제목 4", "여기 제목 5" .