html - 滚动时表格内的图像与导航列表项重叠

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

z-index 1 应该被添加到 Header 的父 div 中，它有列表项 - “Title 3 HERE”、“Title 4 HERE”、“Title 5 HERE”。