CSS Stacking Context 里那些鮮為人知的坑

OldPanda 發(fā)布于2019-08-28 18:11 / 1128人閱讀

摘要：我們通過給已定位元素指定值以改變元素在其中軸的相對偏移量。這里的相對偏移指的是以為基準，相對于其它兄弟元素距離用戶遠近的順序。以上便是我對中造成諸多匪夷所思現(xiàn)象原因的總結。目前這個仍未被解決，官方建議避免在元素下做定位。

通常我們在學習/了解CSS的時候，并不會直接接觸/了解到stacking context的規(guī)則，甚至在初學的時，僅僅接觸到z-index、知道可以通過z-index控制元素顯示的前后順序，卻常常由此碰到各式各樣匪夷所思的bug，這兩天我也趟了一次z-index渾水，搞明白了z-index扯出的這一系列stacking context坑。

什么是z-index

在W3C document里對z-index的解釋是：

The z-index attribute lets you adjust the order of the layering of objects when rendering content.
It means that CSS style rules allow you to position boxes on layers in addition to the normal rendering layer (layer 0). The Z position of each layer is expressed as an integer representing the stacking order for rendering. Greater numbers mean closer to the observer.

簡言之我們通過z-index在layer 0上控制「已定位」元素的先后順序，其值越大元素越靠近用戶。#這里layer 0指代root節(jié)點即html元素

什么是Stacking Context

顯然僅僅知道z-index的作用并不能解釋現(xiàn)實中諸多怪異的CSS z-index定位表現(xiàn)，如同上一節(jié)中提到指代root節(jié)點的layer 0，在CSS中也可構造出與其相似的結構，這種提供z-index棧空間特性并影響子元素渲染順序的結構，我們稱之為stacking context。

怎樣的CSS屬性可以使element形成一個Stacking Context

滿足下面規(guī)則的元素將會構造出一個 Stacking Context 結構：

root元素(html)

「已定位」元素（position: absolute or relative）且指定z-index值非auto的元素

flex item且指定z-index值非auto的元素

opacity小于1的元素

指定transform值非none的元素

指定mix-blend-mode值非normal的元素

指定filter值非none的元素

指定isolation值為isolate的元素

==特例 mobile webkit & chrome 22+，指定position: fixed的元素==

在will-change屬性上指定值為上述列表任意屬性的元素

指定-webkit-overflow-scrolling值為touch的元素

*注意除了前兩條之外有如此多滿足創(chuàng)建stacking context的條件，這也是造成諸多bug的源泉，比如opacity<1

Stacking Context有什么特性

stacking context可以嵌套

每個stacking context相對于兄弟元素是完全獨立的，其內部規(guī)則不會影響到外部

每個stacking context元素都會被父stacking context當做一個元素施加stacking規(guī)則

對于一個stacking context內部的元素，如果這個元素沒有形成stacking context，其z-index值是auto（但其實如果這個元素沒有形成stacking context，z-index屬性對這個元素的表現(xiàn)根本沒有意義，我們可以理解為這個元素和其parent stacking context是一體的）。

我們通過給已定位元素（position: absolute or relative)指定z-index值以改變元素在其parent stacking context中Z軸的「相對偏移」量。這里的「相對偏移」指的是以parent stacking context為基準，相對于其它兄弟元素距離用戶遠近的順序。

由于形成stacking context的元素其z-index屬性并不對內部元素產(chǎn)生影響，因此其子元素以其（parent stacking context）為z-index相對基準點即z-index: auto，這些子元素的stacking context兄弟元素按照下面的遠近順序展示在屏幕：

遠 ---------> 近

parent stacking context >> z-index < 0 >> 非stacking context元素（z-index: auto） >> z-index >= 0

*注意在stacking context中的元素不會遠于parent stacking context

非「定位」元素Stacking Context的特殊規(guī)則

先上一段極其容易產(chǎn)生困惑的代碼（不支持embedded scripts略卵疼）：

See the Pen yNJRKX by abruzzi (@abruzzi) on CodePen.

http://codepen.io/abruzzi/pen/yNJRKX

如上文提及，這里box3和box5通過opacity: .99創(chuàng)建了一個stacking context，但box3卻覆蓋在了box4之上，翻查W3C文檔并沒有這樣一條規(guī)則定義stacking context元素默認在非stacking context元素之上；我們修改了box5的z-index屬性為負值，box5依然在box6之上；我們又通過position: relative & z-index: -1創(chuàng)建了box7的stacking context，其表現(xiàn)卻是正常的（話說回來，z-index: auto本身也無法形成stacking context，因此根本沒有存在類似「stacking context元素默認在非stacking context元素之上」定義的意義）

在W3C文檔的某個角落，我們可以究其原委：

If an element with opacity less than 1 is not positioned, implementations must paint the layer it creates, within its parent stacking context, at the same stacking order that would be used if it were a positioned element with ‘z-index: 0’ and ‘opacity: 1’.

簡言之，如果一個元素不是通過「定位」(position: absolute or relative)實現(xiàn)了stacking context，它將會以z-index: 0（高于auto）被看待，因此無論如何更改非「定位」元素的z-index都是無效的。

雖然文檔中只提到opacity less 1構成的stacking context被看做z-index: 0，但通過測試，可以發(fā)現(xiàn)其他非「定位」方式創(chuàng)建的stacking context擁有與opacity less 1一致的表現(xiàn)。

以上便是我對CSS stacking context中造成諸多匪夷所思現(xiàn)象原因的總結。

*注：下文內容與題目無關，僅為作者思路延展

什么是GraphicLayer

瀏覽器在解析渲染document時，內部的處理并未直接暴露給我們，其中很重要的結構就是Layers。在這些未暴露的步驟中，RenderLayers負責渲染整個DOM子樹結構，GraphicLayers則負責渲染RenderLayers中的子樹，GraphicLayer把所負責的子樹作為textures（可以理解為內存間移動的位圖）upload到GPU，以實現(xiàn)高速繪制，也因而可以大幅優(yōu)化這些屬性帶來的動畫效果。

包括opacity在內，這些可產(chǎn)生stacking context的屬性和創(chuàng)建特殊GraphicLayers的屬性（opacity, filter, transfrom3d等）都很相似，但某些屬性卻又無法吻合（例如2d transfrom），冥冥之中總覺得兩者原理上有相似之處，能力有限，只好留一坑。

Fixed定位脫離Viewport的bug

在定位中有一個跟stacking content無關但又較為相近的危險Bug，注意下面代碼中.inner的定位：

See the Pen VLKeZP by abruzzi (@abruzzi) on CodePen.

http://codepen.io/abruzzi/pen/VLKeZP

對于聲明transfrom值非none元素，其子元素中若存在position: fixed將以聲明transform的最近祖先作為基準而定位，這是因為transfrom值非none的元素定義了一個局部坐標系統(tǒng)，導致postion: fixed以此坐標系統(tǒng)計算布局。
目前這個bug仍未被解決，官方建議避免在transform元素下做fixed定位。

by Abruzzi"s blog

云服務器 GPU云服務器 stacking-context html5里css Stacking html 鮮為人知的

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111072.html

2018你成長了么？一份給你的前端技術清單

摘要：由于個人精力有限，一些技術點的歸納可能有失偏頗，或者目前并未納入進來，因此上的清單內容也會不斷更新。 2018 眼看就要過去了，今年的你相較去年技術上有怎樣的收獲呢？記得年初的時候我給自己制定了一個學習計劃，現(xiàn)在回顧來看完成度還不錯。但仍有些遺憾，一些技術點沒有時間去好好學習。在學習中我發(fā)現(xiàn)，像文章這樣的知識往往是碎片化的，而前端涉及到的面很多，如果不將這些知識有效梳理，則無法形成...

K_B_Z 2019-08-02 11:53 評論0 收藏0
2018你成長了么？一份給你的前端技術清單

摘要：由于個人精力有限，一些技術點的歸納可能有失偏頗，或者目前并未納入進來，因此上的清單內容也會不斷更新。 2018 眼看就要過去了，今年的你相較去年技術上有怎樣的收獲呢？記得年初的時候我給自己制定了一個學習計劃，現(xiàn)在回顧來看完成度還不錯。但仍有些遺憾，一些技術點沒有時間去好好學習。在學習中我發(fā)現(xiàn)，像文章這樣的知識往往是碎片化的，而前端涉及到的面很多，如果不將這些知識有效梳理，則無法形成...

LancerComet 2019-08-29 17:08 評論0 收藏0
2018你成長了么？一份給你的前端技術清單

摘要：由于個人精力有限，一些技術點的歸納可能有失偏頗，或者目前并未納入進來，因此上的清單內容也會不斷更新。 2018 眼看就要過去了，今年的你相較去年技術上有怎樣的收獲呢？記得年初的時候我給自己制定了一個學習計劃，現(xiàn)在回顧來看完成度還不錯。但仍有些遺憾，一些技術點沒有時間去好好學習。在學習中我發(fā)現(xiàn)，像文章這樣的知識往往是碎片化的，而前端涉及到的面很多，如果不將這些知識有效梳理，則無法形成...

Flands 2019-08-23 12:46 評論0 收藏0
深入 css z-index 屬性

摘要：不能修改結構不能加入或修改任何元素的不能加入或修改任何屬性目標要完成下面這樣，先不要偷看解答自己想一想。當我們沒有和屬性的時候，規(guī)則非常簡單，就是按照文件中撰寫的先後順序。有設定且為，設定小於和其他等屬性也在此列。說來汗顏，一直以來對於 css 常常是不求勝解。直到自己需要打造自己的輪子才發(fā)現(xiàn)對 z-index 完全不熟悉。關於 z-index 的問題其實非常少人完全明白它到底是怎麼...

godlong_X 2019-08-30 12:53 評論0 收藏0
CSS 中重要的層疊概念

摘要：標簽中的一切都被置于這個默認的層疊上下文的一個層疊層上物品放在桌子上。在層疊上下文中，其子元素按照上面解釋的規(guī)則進行層疊。在中所有的盒模型元素都處于三維坐標系中。最近在項目的過程中遇到了一個問題，menu-bar希望始終顯示在最上面，而在之后的元素都顯示在它之下，當時設置了 z-index 也沒有效果，不知道什么原因，因此找了一下css有關層疊方面的資料，解決了這個問題，這里記錄一下...

sshe 2019-08-30 15:54 評論0 收藏0