我可以在父母的下方放置一個內部元素嗎？

似乎與像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