Изображение внутри Стол перекрытия с элементом списка навигации при прокрутке

Question

. См. Прикрепленный снимок экрана. Я занимаюсь разработкой небольшого веб-сайта с использованием HTML, CSS3, Javascript. Для этого я добавил изображение внутри таблицы и правильно отобразил его без каких-либо проблем. Но при прокрутке он перекрывается с верхней фиксированной навигационной панелью (UL> элементы LI, упакованные по горизонтали). Являюсь новичком в HTML и хотел бы знать, есть ли какое-либо Z-свойство, чтобы подтолкнуть изображение к меню панели навигации.

HTML код:

<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

г-индекс 1 должен быть добавлен в родительский DIV из заголовка, который, имеющий элементы списка - "Заголовок 3 HERE", "Title 4 ЗДЕСЬ", "Title 5 ЗДЕСЬ" ,