FF4溢出和Z索引問題（孩子不會溢出另一個父母）

FF4中有這個看似簡單的問題。
在下面的代碼中，我需要P1_child溢出（放置在上面）P2_child。但是P1_child消失在P2後面（甚至沒有按照預期說到P2_child）FF4溢出和Z索引問題（孩子不會溢出另一個父母）

我是否缺少一些簡單的東西？

<div> 

    <div id="P1" style="position:relative; z-index: 21;"> 
    <div id="P1_child" style="z-index: 2;"></div> 
    </div> 

    <div id="P2" style="position:relative; z-index: 21;"> 
    <div id="P2_child" style="z-index: 1;"></div> 
    </div> 

</div>

在此先感謝

來源

2011-05-25 Pierre

測試它，你忘了包括代碼？ – Jrod 2011-05-25 14:24:39

對不起，現在包括它。 – Pierre 2011-05-25 14:28:52

您的代碼適合我：http://jsfiddle.net/X8h7k/ – 2011-05-25 14:35:25

您需要分配position:absolute兒童的div（否則z-index將無法正常工作），這樣，他們相對於他們的父母將位置（因爲他們有position:relative）。

您還需要從父級divs中刪除z-index，因爲當您將z-index分配給相對定位的元素時，子元素相對於其父級堆疊上下文而定位。您有完整的文檔here。

<div> 

    <div id="P1" style="position:relative"> 
     <div id="P1_child" style="z-index: 2; position:absolute">P1</div> 
    </div> 

    <div id="P2" style="position:relative"> 
     <div id="P2_child" style="z-index: 1; position:absolute">P2</div> 
    </div> 

</div>

或檢查，並在this jsFiddle

來源

2011-05-25 15:34:47

但我會嘗試帶有絕對位置的孩子，但是對於堆疊順序。 P1_child的堆疊順序爲21.2，P2_child的順序爲21.1。那麼P1_child應該會溢出並出現在P2_child之上？由於複雜的原因，父母的z-索引需要相同。 – Pierre 2011-05-26 06:30:43

查看[此鏈接]（https://developer.mozilla.org/en/Understanding_CSS_z-index/The_stacking_context）以更好地理解，或者[完整文檔]（https://developer.mozilla.org/zh/Understanding_CSS_z-index ）。它沒有21.2或21.1，它有21個，而在那個21內，它有2 ... P1（z-index：21）直接與P2（z-index：21）競爭，並且P1_child直接依賴於P1定位，P2_child也取決於P2。 - – 2011-05-26 08:25:04

好孩子作爲絕對自動z-index做的伎倆。 IE7仍然存在一個問題，如果有人想評論一下這個問題，那麼這個問題就好像是堆疊順序錯誤。 – Pierre 2011-05-26 08:31:16

FF4溢出和Z索引問題（孩子不會溢出另一個父母）

回答

相關問題