4

我试图将一个绝对定位的元素放在一个相对定位的元素之下。由于场地开发的限制，蓝框必须相对定位。

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

4

2 回答 2

7

编辑：我被误导了，负索引是在 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;
}

不过，最好重构您的布局以避免这种黑客攻击。

于 2012-05-15T13:38:31.773 回答
2

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

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

于 2014-10-08T20:21:44.497 回答