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

Question

我想把一个绝对定位的元素放在一个相对定位的元素下面。由于网站开发的限制，蓝框必须相对定位。

想象一个对话泡泡是蓝色框，泡泡的尾部是 :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 中。添加标记，但似乎这是唯一的方法。

Answer 1

编辑:我被误导了，负索引是在 CSS2.1 中引入的。这个解决方案仍然是正确的，尽管我认为它是一个 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;
}

不过，重构您的布局以避免这种攻击会好得多。