chrome與firefox的z-index行為不同

Question

我有一堆CSS應用於父元素及其子元素：

 .parent { position: fixed; top: 0px; } .el { position: fixed; top: 5px; z-index: 100; } .bodycontent { z-index: 1; position: relative; } 

 <div class="parent"> <div class="el"> <button></button> </div> </div> <div class="bodycontent"></div> 

頁面是這樣的，當滾動時， .parent會在.bodycontent下面.bodycontent但是.el會在它之上。 這適用於我希望它在Firefox中，但不適用於Chrome。

有什么建議？ 我嘗試過使用不同的z-index值和不同的position值，但沒有成功。

Answer 1

Chrome和Firefox都按預期工作

從版本22開始，這是Chrome有意處理fixed元素堆疊的方式。 正如Google自己撰寫的一篇文章所述：

在Chrome 22中， position:fixed元素的布局行為與以前的版本略有不同。 所有position:fixed元素現在形成新的堆疊上下文。 這將更改某些頁面的堆疊順序，這可能會破壞頁面布局。

（ https://developers.google.com/web/updates/2012/09/Stacking-Changes-Coming-to-position-fixed-elements?hl=en ）

Firefox正在按計划運行。 Mozilla文檔聲明此行為本地化為移動WebKit和Chrome 22以后：

在移動WebKit和Chrome 22+上，position：fixed總是創建一個新的堆疊上下文，即使z-index是“auto”

（ https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context ）

為什么會這樣

這種變化的結果意味着，即使Chrome將始終創建一個新的堆疊內容z-index父容器的設置為auto （默認值）。 這不同於position: absolute; 和position: relative; 因為當z-index 未設置為auto時，它們僅形成自己的堆疊上下文。

頁面上的大多數元素都在一個根堆疊上下文中，但是具有非自動z-index值的絕對或相對定位的元素形成它們自己的堆疊上下文（也就是說，它們的所有子元素都將在父元素中進行z排序。不與父母之外的內容交錯）。 從Chrome 22開始， position:fixed元素也會創建自己的堆疊上下文。

（ https://developers.google.com/web/updates/2012/09/Stacking-Changes-Coming-to-position-fixed-elements?hl=en ）

這意味着在你的例子中.el的z-index是相對於它的父類.parent來計算的。 它顯示在.bodycontent下，因為：

• .bodycontent的z-index是相對於root的
• .el的z-index是相對於.parent
• .parent的z-index是相對於root的
• .parent的z-index未指定，因此設置為默認auto （實際上為0 ）
• .parent的z-index低於.bodycontent ，因此顯示在它下面。 因為.el屬於它，它也顯示在.bodycontent下。

預期結果的示例

 body { margin: 0; } div { height: 100px; width: 100px; } .parent { background-color: red; position: fixed; top: 0; } .el { background-color: blue; left: 25px; position: fixed; top: 25px; z-index: 100; } .bodycontent { background-color: green; left: 50px; position: relative; top: 50px; z-index: 1; } 

 <div class="parent"> <div class="el"></div> </div> <div class="bodycontent"></div> 

以上代碼將在Chrome和Firefox中產生以下結果：

哪個是對的？

Chrome似乎沒有遵循W3C規范，並且進行了此更改，以便桌面實施與移動實施相匹配：

移動瀏覽器（Mobile Safari，Android瀏覽器，基於Qt的瀏覽器）將位置：固定元素放置在自己的堆疊上下文中並且有一段時間（自iOS5，Android Gingerbread等），因為它允許某些滾動優化，使網頁更多對觸摸更敏感。 由於以下三個原因，更改將被帶到桌面：

1 - 在“移動”和“桌面”瀏覽器上具有不同的呈現行為是網絡作者的絆腳石; CSS應盡可能在任何地方都一樣。

2 - 對於平板電腦，不清楚哪種“移動”或“桌面”堆疊上下文創建算法更合適。

3 - 將滾動性能優化從移動設備優化到桌面設備對用戶和作者都有好處。

Firefox正在以正確的方式處理堆疊。

如何獲得理想的結果

可以規避這種行為的唯一方法是將.el移出.parent而改為使其成為兄弟：

 body { margin: 0; } div { height: 100px; width: 100px; } .parent { background-color: red; position: fixed; top: 0; } .el { background-color: blue; left: 25px; position: fixed; top: 25px; z-index: 100; } .bodycontent { background-color: green; left: 50px; position: relative; top: 50px; z-index: 1; } 

 <div class="parent"></div> <div class="el"></div> <div class="bodycontent"></div>