html - 在更高的 div z-index 上使用定位下拉菜单推进 z-index

Question

我有三个 div:页眉、内容、页脚

<div id="header">
 <ul id="top-nav">
  nav links & sub menus
 </ul>
</div>

<div id="content">
 .. content
</div>

<div id="footer">
 .. footer links
</div>

我将内容设置为更大的 z-index，并为其指定了 margin-top:-100px 以在标题上方显示内容 div 的一部分，如本屏幕截图所示(如下)。我还给了 ul#top-nav 一个比 #content 更大的 z-index，但没有运气。

我想在将鼠标悬停在链接(关于、访问、志愿者等)上时显示下拉菜单，但它们显示在内容 div 后面。我知道发生这种情况是因为内容 div 的 z-index 比标题 div 更大，但是当您将鼠标悬停在链接上时是否可以在内容 div 上显示导航？

Answer 1

z-index 仅适用于定位元素。在这种情况下，您不需要为任何内容设置 z-index。

将菜单项及其子菜单放入某个框中。将 :hover 规则与 position:relative; 结合使用。

fiddle 示例:http://jsfiddle.net/8Ghsm/