スクロール中にテーブル内の画像がナビゲーションリスト項目と重なっています

Question

。添付のスクリーンショットを参照してください。 HTML、CSS3、Javascriptを使って小さなウェブサイトを開発しています。要件のために、テーブルの中に画像を追加しました。問題なく正しく表示されます。しかし、スクロールしている間は、一番上の固定ナビゲーションバーと重なっています（UL> LI要素は水平にパックされています）。 HTMLを初めて使用していて、ナビゲーションバーのメニューの後ろに画像をプッシュするZ-Propertyがあることを知りたいと思います。

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

z屈折率1がリスト項目を有しているヘッダーの親DIVに追加されるべきである - "タイトル3 HERE"、 "タイトル4 HERE"、 "タイトル5 HERE" 。