Question

这样的标记

<div id="container">
    Outer Div
    <div id="inner">Inner Div</div>
</div>

和CSS一样

#container {
    position: relative;
    z-index: 6;
}
#inner {
    position: absolute;
    z-index: 4;
}

#inner仍高于#container我可以#inner以下吗？

Answer 1

没有

CSS 2.1规范说明了这个绘画元素的标准：

背景和边界元素形成堆叠上下文。
孩子堆叠上下文负堆栈水平（最负面第一）。
流入，非内联级别，非定位的后代。
漂浮的后裔。
in-flow，inline-level，未定位的后代，包括内联表和内联块。
孩子堆叠上下文堆栈级别0，并定位 'z-index：auto'。
孩子堆叠上下文积极的堆栈水平（最少积极的第一）。

鉴于这些规则和您的HTML，#container正在为元素#inner创建堆叠上下文，这意味着必须首先呈现#container。

其他人已经发布了替代HTML / CSS以获得您想要的效果，但如果您想了解更多关于您想要的内容的更多信息，请参阅以下文档：

http://www.w3.org/TR/CSS21/visuren.html#layers

Answer 2

在HTML方面，你只需要将它放在内部元素之外。这是您的解决方案：http://jsfiddle.net/nwekR/23/

<div id="container">
    Outer Div
</div>
<div id="inner">Inner Div</div>

Answer 3

最干净的解决方案是添加额外的包装元素，并将#inner移到#container之外。

额外的包装元素被赋予position: relative，因此其他所有内容应与之前相同，但#inner位于#container下面。

Live Demo

Answer 4

这是不可能的（在它当前的内部容器子容器的状态），因为当浏览器呈现DOM时，它从DOM树上自上而下，并且没有办法在已经存在的东西下绘制被绘制（即在孩子面前画父母）。

您可以阅读有关z-index here的更多信息。

有很多方法可以实现（通过更改html），但是你可以看到thirtydot的解决方案。

Answer 5

#container {
    background: yellow;   
    position: relative;
    height: 100px;
    -moz-box-shadow: 0 2px 6px rgba(0,0,0,0.6);
    -webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.6);
    box-shadow: 0 2px 6px rgba(0,0,0,0.6);
    z-index: 6;
}
#inner {
    background: orange;
    position: absolute;
    z-index: 4;
    width: 100px;
    height: 50px;
    top: 180px;
    right: 0;
    padding-top: 20px;
}

我可以将内部元素放在其父元素下面吗？

5 个答案: