用來堆疊變更的位置:固定元素

Tom Wiltzius
Tom Wiltzius

在 Chrome 22 中,position:fixed 元素的版面配置行為與先前版本稍有不同。所有 position:fixed 元素現在都會形成新的堆疊結構定義。這項變更會改變部分頁面的堆疊順序,可能導致頁面版面配置無法正常運作。新行為與行動裝置上的 WebKit 瀏覽器行為相符 (iOS Safari 和 Android 版 Chrome)。

堆疊什麼?

大家都很熟悉且喜歡 z-index 用來判斷網頁上的元素深度排序。並非所有 Z-index 值都會相等,但元素的 z-index 只會判斷元素相對於同一堆疊情境中其他元素的順序。頁面大多數的元素都位於單一根堆疊情境下,但具有非自動 z-index 值的絕對或相對定位元素會形成專屬的「堆疊結構定義」 (也就是說,其所有子項都會以 Z 順序排列,不會與父項外部的內容交錯)。從 Chrome 22 版開始,position:fixed 元素也會建立專屬的堆疊結構定義。

如需堆疊結構定義的概要總覽,請參閱這篇 MDN 文章

比較 position:fixed新位置:固定式屬性:為了參照,position:sticky 一律會建立新的堆疊結構定義。

動機

行動瀏覽器 (Mobile Safari、Android 瀏覽器、Qt 型瀏覽器) 會將 location:固定元素放在自身堆疊中,而且也可能有一段時間 (從 iOS5、Android Gingerbread 等),因為這個模式支援特定捲動最佳化功能,讓網頁更能回應使用者的需求。改用電腦版服務的原因有以下三點:

  1. 對於網頁作者而言,在「行動裝置」和「電腦」瀏覽器中使用不同的顯示行為,會構成網路作者的困擾,而且 CSS 應該盡可能在各種地方保持相同運作。
  2. 而使用平板電腦時,並不清楚在採用「行動裝置」或「電腦」堆疊情境的演算法中,哪一種比較合適。
  3. 將行動裝置的捲動效能最佳化,對於使用者和作者來說都很有利。

異動的具體細節

以下是不同版面配置行為的範例:https://codepen.io/paulirish/pen/CgAof

這項變更實施後,兩個版本都會轉譯為正確的版本。

在這個範例中,綠色方塊具有 z-index: 1,粉紅色方塊含有 z-index: 3,橘色方塊則包含 z-index: 2。藍色方塊是橘色方塊的祖系,內含 position:fixed

如果藍色方塊有專屬的堆疊內容,橘色方塊的 z-index 就會根據藍色方塊的堆疊內容計算。由於藍色方塊的 z-indexauto,因此在根堆疊情境中讓它的堆疊層級為零,因此橘色方塊最後位於綠色和粉紅色方塊背後,而根方塊的 Z-index 值分別為 1 和 3。

如果藍色方塊沒有專屬的堆疊內容,則橘色方塊的 z-index 會根據根堆疊情境 (以及綠色和粉紅色方塊) 計算。因此,橘色方塊最後與粉紅色和綠色方塊交錯。

如要進一步瞭解堆疊結構定義建立的條件 (以及堆疊結構定義的一般行為),請再次參閱這篇 MDN 文章。在右側範例中,我們總是為藍色方塊提供自己的堆疊內容,因為其不透明度少於 1。變更的行為會有效新增另一個條件,用來建立獨立的堆疊情境,也就是將元素命名為「position:fixed」。

測試與未來

如要測試網頁是否會變更,請前往 Chrome 的 about:flags,然後開啟/關閉「固定位置元素建立堆疊內容」。如果版面配置在這兩種情況下的運作方式都相同,系統就會設定這個值。如果不是,請確定您啟用了該旗標,因為 Chrome 22 將預設使用這個旗標。

這項變更會移除一項功能 - 能夠從外部執行非捲動內容的固定子樹狀結構。任何網頁程式開發人員不太可能為了達成這個目的而執行這項作業,而是藉由為 DOM 的不同部分指定多個位置:固定元素,創造相同的效果。我們以下列兩個例子為例:

https://codepen.io/wiltzius/pen/gcjCk

這個網頁會嘗試使用位置:固定元素的兩個子項 div (重疊 A 和重疊 B),然後分別置於不同內容 div 及以下兩個不同內容 div 上方。目前不可能這麼做,因為 position:fixed 元素原本就不行,該元素 (及其所有子項) 一律不在 Chrome 上方或下方 div1 中。請注意,1

如要修正這個問題,可將兩個疊加層拆分為各自的位置:固定元素。每個都有各自的堆疊結構定義,其中一個可位於內容 div 上方,而其中一個可位於內容 div 下方。請查看適用於 Chrome 21 和 22 的固定範例:

https://codepen.io/wiltzius/pen/vhFzG

本例的生成結果歸功於可無限 hixie

Chrome 是第一個第一個電腦版瀏覽器決定位置:固定元素,建立專屬的堆疊內容。相關標準是 CSS Z-index 規格 (請參閱 https://www.w3.org/TR/CSS21/zindex.html)。目前還沒有明確表達行動裝置瀏覽器和電腦版瀏覽器之間差異的做法,不過有鑑於行動裝置和電腦瀏覽器必須採用兩種不同的行為,Chrome 目前決定在這兩種平台上改用單一行為。

2012 年 10 月 1 日更新:本文的原始版本建議已調整 CSS z-index 規格,以反映位置:固定元素的新行為。這不正確;我們已在 www 樣式清單上討論過這項指令,但截至目前並未採用任何變更。