z-index：绝对定位元素位于相对定位元素之下。

Question

z-index：绝对定位元素位于相对定位元素之下。

5

我正在尝试将一个绝对定位的元素放在一个相对定位的元素下面。由于站点开发的限制，蓝色框必须是相对定位的。

想象一下，一个漫画气泡是蓝色框，气泡的尾巴是:after伪元素。我需要绿色框在这两个元素后面，因为它要为这两个元素提供背景。

div.layer01 {
    background-color: blue;
    position: relative;
    z-index: 10;
}
div.layer01:after {  /* This is the tail of the bubble */
    display: block;
    background-color: red;
    content: '\00a0';
    width: 30px;
    height: 30px;
    position: absolute; 
    right: 20px;
    top: 50px;
    border: 3px #fff solid;
}    

/* This should be behind the tail and the blue box (bubble) */
div.layer01 div.layer02 { 
    background-color: green;
    width: 320px;
    height: 125px;
    display: block;
    position: absolute; 
    z-index: 5;
}

<div class="layer01"> <!-- speech bubble -->
    <div class="layer02">Why isn't this below the blue?</div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non dolor quis leo malesuada pharetra at in massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>

修复：

将我想要定位的元素从相对定位的元素中取出，然后将内容包装到一个新的 div 中。虽然增加了标记，但似乎这是唯一可行的方法。

- beingalex

1

您不能将元素放置在其容器下方。请重新考虑布局。 - lorenzo-s

Jared的回答是正确的。采纳他的建议并重构你的标记。有关z-index的更多信息，请参见：http://timkadlec.com/2008/01/detailed-look-at-stacking-in-css/ - Faust

Jared的答案是错误的，并且完全依赖于错误的主张，即常识方法是不明确的。当没有必要时，不要玩hacky游戏。 - John Haugeland

2个回答

3

自2011年中期CSS2.1以来，使用负Z-Index是正确的、安全的、合法的做法。这种行为在所有主要浏览器中都得到了良好的支持，包括最初的Chrome、最初的Safari、最初的Opera、IE4和Firefox 3。最后一个支持此功能的浏览器始于2008年。

https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

- John Haugeland

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- JaredMcAteer · Accepted Answer

编辑：我被误导了，负索引是在CSS2.1中引入的。这个解决方案仍然是正确的，尽管我的评论说它是一个hack不正确。

即使是绝对定位的子元素，也不能在其父元素下面，除非你使用hack。

这个hack是从父元素中删除z-index属性，并给子元素一个负的z-index。

http://jsfiddle.net/uZdy3/1/

div.layer01 {
    background-color: blue;
    position: relative;
}
div.layer01:after {  /* This is the tail of the bubble */
    display: block;
    background-color: red;
    content: '\00a0';
    width: 30px;
    height: 30px;
    position: absolute; 
    right: 20px;
    top: 50px;
    border: 3px #fff solid;
}    

/* This should be behind the tail and the blue box (bubble) */
div.layer01 div.layer02 { 
    background-color: green;
    width: 320px;
    height: 125px;
    display: block;
    position: absolute; 
    z-index: -5;
}

最好重构您的布局以避免使用这种hack。