Z-index不像預期的那樣在一個固定位置元素內部進行絕對定位

我有一種情況，即在一個頁面上顯示堆疊一個的頁面上有兩個或多個固定位置元素（也就是說，第二個的頂部鄰接第一個的底部 - 這些元素沒有z-索引堆疊）。在第一個固定位置元素中，有一個絕對定位的元素，它比其固定父元素高，因此它超出了該固定父元素的底部。Z-index不像預期的那樣在一個固定位置元素內部進行絕對定位

問題在於下一個固定位置元素顯示在絕對定位元素的頂部。我在絕對定位元素上設置了比固定定位元素更高的z-index值，但它完全被忽略。

爲了幫助澄清這一問題，我放在一起的例子：

HTML

<div class="fixed first"> 
    <p>This is a fixed element</p> 
    <p class="abs"> 
     I should be displayed above both fixed position elements 
    </p> 
</div> 
<div class="fixed second"> 
    <p>This is a fixed element</p> 
</div>

CSS

.fixed { 
    font-size: 16px; 
    background: #eee; 
    border-bottom: 1px solid #ccc; 
    position: fixed; 
    height: 3em; 
    width: 100%; 
    z-index: 1; 
} 

.abs { 
    position: absolute; 
    background: #acc; 
    height: 6em; 
    top: 0; 
    left: 25%; 
    width: 50%; 
    z-index: 2; 
} 

.second { 
    top: 3.0625em; 
}

下面是對的jsfiddle工作實例：

http://jsfiddle.net/GS4E4/8/

我有點被這個打倒了。有沒有人有解釋爲什麼會發生這種情況，還有解決問題的方法？

來源

2013-09-05 Michael Bester

[這對z-index如何工作有很好的解釋]（http://coding.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/），因爲您將看到具有z-index的同一級別上的所有元素將優先於子圖層z-index。考慮到這一點，你的上面的小提琴按預期工作 – Pete

當然！我忘了每個定位元素都創建了自己的堆疊環境。由於示例中的每個固定位置元素具有相同的z-索引值，因此源順序將發揮作用。感謝提醒，皮特。 –

正如皮特的評論所暗示的，這一切都歸結爲堆疊環境。在這種情況下，兩個.fixed元素都由於position: fixed;而創建自己的堆疊上下文。第一個.fixed元素的子元素在其父代中創建嵌套的堆疊環境。由於它嵌套在現有的堆棧上下文中，因此它永遠不會突破並堆疊更高的堆棧;其Z指數現在與其父母相對。

該規範實際上有些有用的細節：http://www.w3.org/TR/CSS2/visuren.html#z-index。您可以通過編號列表看到子堆疊上下文最後被繪製爲死亡。

所以在你的情況下，你的.fixed.first元素需要有一個z-index爲2的子元素堆棧頂部.fixed.second。

來源

2013-09-05 15:35:10 adamesque

謝謝Adam！我完全忘記了定位父元素的各個堆疊上下文。考慮到這一點，我已經用一個反映這個問題的修正更新了小提琴：http://jsfiddle.net/GS4E4/13/ –

在兩個div之外移動.abs。

<div class="fixed first"> 
    <p>This is a fixed element</p> 
</div> 
<div class="fixed second"> 
    <p>This is a fixed element</p> 
</div> 
<p class="abs"> 
     I should be displayed above both fixed position elements 
    </p>

見http://jsfiddle.net/GS4E4/9/ 你有現在。ABS相對定位。首先這樣就坐在上面。第一，但上面沒有。第二個這樣的，你的提琴被正確解釋。

來源

2013-09-05 15:07:03 erwinheiser

謝謝歐文。我意識到這是一個選擇，在這個簡單的例子中，這是一件容易的事情。然而，在我正在開發的應用程序的上下文中，這是一個更困難的選擇，因爲佈局要複雜得多。如果沒有其他合理的解決方案，我會考慮這一點。 –

Z-index不像預期的那樣在一個固定位置元素內部進行絕對定位

回答

相關問題