Question

在我的导航中，我有一个突出的红色框。我希望那个红色框重叠所有Divs。我为它设置了一个余量，所以它会将它放在我放入黑盒子的其他元素中。问题在于它的边缘也影响了单独元素的布局。孩子们吼叫吧。当我向下面的部分的子元素添加负边距时它确实重叠但我希望红色框在顶部。我使用z-index，它似乎不起作用。

这是我在Jsfiddle上的例子： http://jsfiddle.net/1qsuvhnd/29/

HTML

<nav>
    <div id="ribbon"></div>    
</nav>
<div id="context">
    <div class="link"></div>
</div>

CSS

#context {
    width: auto;
    padding: 20px;
    height: 300px;
    background-color: blue;
    z-index: 1;
}
#context .link {
    float: Left;
    height: 260px;
    width: 300px;
    margin-left: -140px;
    background-color: White;
    z-index:1 !important;
}
nav {
    width: auto;
    height: 65px;
    background-color: black;
    z-index:99 !important;
    clear:both;
}

nav #ribbon {
    float: left;
    margin: 0px 50px;
    Width: 65px;
    height: 130px;
    background-color: red;
    z-index= 99;
}

Answer 1

要使用z-index，您需要指定position（例如absolute，fixed或relative）。

写的最后一行是错误的：

z-index = 99;

编写它的正确方法是：

z-index: 99;

Answer 2

如何：http://jsfiddle.net/1qsuvhnd/30/

将色带更改为位置：绝对;并修复z-index =错字：D

现在你不需要那个边缘黑客!!

nav #ribbon {
    float: left;
    margin: 0px 50px;
    Width: 65px;
    height: 130px;
    background-color: red;
    z-index: 99;   /* take that equal out and make it a colon */
    position: absolute;  /* position: absolute to the rescue!!!! */
}

Answer 3

您需要为nav div指定位置CSS规则，以使z-index正常工作，如下所示：

nav #ribbon {
    float: left;
    margin: 0px 50px;
    Width: 65px;
    height: 130px;
    background-color: red;
    z-index:99;
    position: relative;
}

这是新的jsFiddle链接： http://jsfiddle.net/1qsuvhnd/54/

元素与z-index不重叠

3 个答案: