z索引问题navmenu不会重叠

时间:2013-09-29 21:02:01

标签: html css

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

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

提前感谢您的帮助。

2 个答案:

答案 0 :(得分:1)

有很多方法可以做到。

您只需为导航菜单指定负边距

即可
#navmenu {
   margin: -10px 0;
}

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

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

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

答案 1 :(得分:0)

您可以执行以下操作:

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