Bild innerhalb der Tabelle überlappt mit dem Element der Navigationsliste beim Scrollen

Question

. Siehe den beigefügten Screenshot. Entwickle eine kleine Website mit HTML, CSS3, Javascript Für eine Anforderung, ich habe ein Bild in einer Tabelle hinzugefügt und es zeigt ordnungsgemäß ohne Probleme. Beim Scrollen überschneidet es sich jedoch mit der oberen fixierten Navigationsleiste (UL> LI Elemente horizontal gepackt). Bin neu in HTML und würde gerne wissen, ob es eine Z-Eigenschaft gibt, um das Bild hinter das Menü der Navigationsleiste zu schieben.

HTML-Code:

<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-Index 1 sollte der Elternteil div von Header hinzugefügt werden, die Listenelemente ist mit - "Titel 3 HIER", "Titel 4 HIER", "Titel 5 HERE" .