z索引问题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的位置将取决于之前的div。它的顶部将是前一个div的顶部加上高度。

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

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

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;
}