我可以在父母的下方放置一个内部元素吗？

似乎与像http://jsfiddle.net/nwekR/我可以在父母的下方放置一个内部元素吗？

<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？

来源

2011-03-21 JM at Work

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

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

来源

2011-03-21 05:10:47

这可行，但你已经失去了“元素的分组”。你会如何添加一个样式[像这样]（http://jsfiddle.net/nwekR/25/）？ *（根据我的回答）* – thirtydot 2011-03-21 05:17:20

我不明白这个问题。你需要添加什么风格？并进入哪个版本？ – 2011-03-21 05:23:48

首先：我不是问这个问题的人。其次，这仅仅是你用你的答案不能做的一个例子。当我说你已经“失去了”元素的分组“，我的意思是你不能（例如！）在容器div中加上'width：50％'并且期望内部div的行为与你一样' d期望。 ['width：50％'your answer]（http://jsfiddle.net/nwekR/27/）vs ['width：50％'my answer]（http://jsfiddle.net/nwekR/28/）。 – thirtydot 2011-03-21 05:27:14

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

你可以阅读更多关于Z指数here。

然而，有些方法可以实现（通过改变html），但是，您可以看到thirtydot的解决方案。

来源

2011-03-21 05:09:06

如果你的意思是“这是不可能的* [没有改变HTML] *”，那么你是对的。否则，请参阅我的答案。 – thirtydot 2011-03-21 05:15:59

不，他是非常正确的：问题是“在其容器下面渲染一个元素”。这是不可能的。你（如你所述）被迫改变元素之间的关系，将#inner放在#container下面。 – 2014-12-12 16:27:26

“它从DOM树上的顶部向下”是通过反对不精确的：DOM元素不只是从上到下绘制：兄弟姐妹按照他们的Z-索引的顺序绘制（并且按照从上到下的顺序if z-index是相等的）。（但它只适用于*兄弟姐妹* - 因此不会改变与问题相关的任何内容）。 – 2014-12-12 16:43:11

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

来源

2011-03-21 05:11:22 s84

你试过这个吗？这看起来不正确。 – thirtydot 2011-03-21 05:14:57

我想我下面不明白。不仅仅是把位置提高到最高位置？ – s84 2011-03-21 05:44:44

我认为他的意思是在下面，如下面的“z-index”风格，而不是下面的“垂直向下”。 – thirtydot 2011-03-21 05:46:49

最简洁的解决方案是增加一个额外的包装元素，并移动#inner外#container。

额外的包装元素给出position: relative，所以其他一切应该与以前相同，除了#inner在#container之下。

Live Demo

来源

2011-03-21 05:13:00 thirtydot