爲什麼固定位置元素顯示在嵌套絕對值之上？

例如，採取以下HTML & CSS：爲什麼固定位置元素顯示在嵌套絕對值之上？

<div class="fixed"></div> 
<div class="wrapper"> 
    <div class="child"></div> 
</div> 

.fixed { 
    background: blue; 
    position: fixed; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    z-index: 2; 
} 

.wrapper, .child { 
    position: absolute; 
    height: 20px; 
    width: 20px; 
    padding: 20px; 
} 

.wrapper { 
    z-index: 1; 
    background: red; 
} 

.child { 
    position: absolute; 
    z-index: 3; 
    background: yellow; 
}

預期行爲將是以上.child顯示.fixed同時.wrapper是看不見的但是上http://jsfiddle.net/STLMR/.fixed節目首先（在Chrome +火狐測試）。有沒有一些技巧，或者是否有一些我錯過的CSS的怪癖？

來源

2013-01-07 DanH

在CSS中，z-index不是絕對的，而是相對於父容器。對於「絕對」，我不是指position: absolute屬性，我聲明這是因爲它可能會令人困惑。

來源

2013-01-07 15:24:17 gd1

好吧TIL，這可能是過去幾年裏很多令人頭痛的問題，謝謝！所以我唯一的選擇是將'.child'移出'.wrapper'，或將'.fixed'放入'.wrapper'內？ – DanH

是的'.fixed'到'.wrapper'似乎支持這個，http://jsfiddle.net/STLMR/4/ – DanH

實際上，有其他明顯的副作用給我的實際使用情況有更復雜的HTML，但我肯定會更接近 – DanH

您必須將.child進入具有較高Z-index比.fixed一個新的容器。

來源

2013-01-07 15:25:42 PaperThick

謝謝！或者將'.wrapper'移動到'.fixed'中：http://jsfiddle.net/STLMR/4/ – DanH

爲什麼固定位置元素顯示在嵌套絕對值之上？

回答

相關問題