Question

我试图将一个绝对定位的元素放在相对定位的元素下面。由于网站开发中的限制，蓝框已经相对定位。

想象一下，讲话泡泡是蓝色的盒子，泡泡的尾巴是：在伪元素之后。我需要绿色框来支持这两个元素，因为它是为这两个元素保留背景。

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>

FIX：

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

Answer 1

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

子元素，即使绝对定位也不能低于其父元素，除非你使用黑客。

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

尽管如此，重构你的布局以避免这种黑客攻击会好得多。

Answer 2

自2011年中期CSS2.1以来一直安全合法的正确回应是使用负Z-Index。所有主流浏览器都支持此行为，可以追溯到原创Chrome，原创Safari，原创Opera，IE4和Firefox 3.最后一个支持此功能的浏览器始于2008年。

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

z-index在相对定位的元素下的绝对定位元素

2 个答案: