html - z index issue navmenu 不会重叠

Question

我试图在我的顶部区域和底部区域之间放置一些链接，以便它们以相等的量重叠它们。我将 navmenu div 设置为比所有其他 div 更大的 z-index，但我无法让它重叠任何东西。网站位于http://www.joekellywebdesign.com/churchsample1/index.html

样式表位于http://www.joekellywebdesign.com/churchsample1/css/styles.css

在此先感谢您的帮助。

Answer 1

有很多方法可以做到。

您可以简单地为您的导航菜单指定一个负边距

#navmenu {
   margin: -10px 0;
}

由于您已将位置指定为相对，这意味着 的位置div将取决于 previous div。它的顶部将是顶部加上前一个的高度div。

您可以将位置更改为absolute，或调整边距或填充值以按照您的方式显示内容div。

z-index仅当元素重叠时才有效。在您的情况下，所有divs 都处于相对位置。它们都没有重叠。

Answer 2

例如，您可以执行以下操作：

<div id="navmenu">
        <div class="inner"><h1>Test text</h1></div>
</div>

而不是在 CSS 中：

#navmenu .inner {
padding-bottom: 15px;
margin-top: -15px;
position: relative;
z-index: 200;
background-color: #F00;
}