CSS 固定 div 在列表菜单上

Question

我有一个列表菜单，如:

<div id="my_menu">
    <ul class="my_horizontal_menu">
        <li class="nav_1">
            <a>my nav1</a>
        </li>
        <li class="nav_2">
            <a>my nav2</a>
        </li>
    </ul>
</div>

根据菜单上的点击，我还有其他的 div 来显示内容:

<div id="my_container_1">
    some data
</div>
<div id="my_container_2">
    some data
</div>

我使用一些简单的 JQuery 代码来显示右侧菜单和容器。一切正常。现在，我在容器中有一个固定的 div:

<div id="my_container_2">
    <table>...some data...</table>
    <div id="my_fixed_div">
    </div>
</div>

固定的 div my_fixed_div 在页面滚动时使用一些 CSS 来固定并且它起作用。问题是这个固定的 div 在用户滚动时与菜单重叠:

你知道如何解决这个问题吗？始终在所有页面内容上显示固定的 div？我尝试使用 z-index:1000 但我不起作用...

Answer 1

给它一个较低的 z-index 值让它呈现在其他元素后面