摘要:但該盒不建立新的層疊上下文,除非是根元素。以上是基于的層疊上下文介紹。同級情況下,按照二者在源代碼中的順序,居后的又重新占領高地了。現在我們看以下源代碼這個時候,以視口為包含塊進行定位和大小計算,將會鋪滿整個屏幕。
1 CSS2.1 中規定的層疊上下文前言:關于層疊上下文,筆者還沒有去閱讀更詳細的 W3C 規范來了解更本質的原理(表打我,等我校招拿到 offer 了我就讀好伐 T_T)。一直聽說 CSS3 里的層疊上下文有新情況,但沒找到很好的參考資料,故自己實戰一把。鑒于筆者水平有限,如有任何遺漏或者錯誤,則懇請讀者斧正。
Background and borders — of the element forming the stacking context. The lowest level in the stack.
Negative Z-Index — the stacking contexts of descendants elements with negative z-index.
Block Level Boxes — in-flow non-inline-level non-positioned descendants.
Floated Boxes — non-positioned floats
Inline Boxes — in-flow inline-level non-positioned descendants.
Z-index: 0 — positioned elements. These form new stacking contexts.
Positive Z-index — positioned elements. The highest level in the stack.
圖文來源:http://webdesign.tutsplus.com/articles/what-you-may-not-know-about-the-z-index-property--webdesign-16892
現在該筆者上場翻譯了!在解釋上面術語之前,需要闡明兩個術語:“定位”指的是 position 為 relative 、absolute 、fixed 的元素,“非定位”則相反。
背景和邊框:建立層疊上下文元素的背景和邊框。層疊中的最低級
負 Z-index:z-index 為負的后代元素建立的層疊上下文
塊級盒:文檔流內非行內級非定位后代元素
浮動盒:非定位浮動元素(筆者注:即排除了 position: relative 的浮動盒)
行內盒:文檔流內行內級非定位后代元素
Z-index: 0:定位元素。這些元素建立了新層疊上下文(筆者注:不一定,詳見后文)
正 Z-index:(z-index 為正的)定位元素。層疊的最高等級
引文如上所表。但筆者提醒各位讀者一點,“Z-index: 0”級的定位元素不一定就會建立新的層疊上下文。因為:
CSS2.1:(z-index: auto)The stack level of the generated box in the current stacking context is 0. The box does not establish a new stacking context unless it is the root element.
當定位元素 z-index: auto,生成盒在當前層疊上下文中的層級為 0。但該盒不建立新的層疊上下文,除非是根元素。
規范是這樣,但 IE6-7 有個 BUG,定位元素即便 z-index: auto 照樣創建層疊上下文。
以上是基于 CSS2.1 的層疊上下文介紹。下面要闡述的是在 CSS3 新環境下,層疊上下文的新變化。
2 CSS3 帶來的變化總的來說變化可以歸為兩點,我們之后一一探討:
CSS3 中許多屬性會創建局部層疊上下文
tranform 屬性改變絕對定位子元素的包含塊
2.1 產生新層疊上下文的情況以下情況會產生新的層疊上下文:
根元素(HTML)
絕對或相對定位且 z-index 值不為 auto
一個伸縮項目 Flex Item,且 z-index 值不為 auto,即父元素 display: flex|inline-flex
元素的 opacity 屬性值小于 1
元素的 transform 屬性值不為 none
元素的 mix-blend-mode 屬性值不為 normal
元素的 filter 屬性值不為 normal
元素的 isolation 屬性值為 isolate
position: fixed
will-change 中指定了上述任意屬性,即便你沒有直接定義這些屬性
元素的 -webkit-overflow-scrolling 屬性值為 touch
以上列表譯自:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context,提醒廣大讀者,別看中文版,因為中文版并非實時跟進更新的,且翻譯不太準確
2.2 提升層疊上下文中的層級以上元素建立新層疊上下文的同時,也會提升元素自身所在層疊上下文中的層級。
我們以 opacity 為例。來看下 CSS3 規范中的話:
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’. If an element with opacity less than 1 is positioned, the ‘z-index’ property applies as described in [CSS21], except that ‘auto’ is treated as ‘0’ since a new stacking context is always created.
如果元素 opacity 小于 1 且未定位,則必須在其父層疊上下文中,按其在定位了的、z-index: 0 且 opacity: 1 的情況中的層疊順序繪制。如果 opacity 小于 1 且已定位,z-index 屬性按 CSS2.1 應用,但 auto 要視為 0,因為新的層疊上下文總是創建了的。
如下案例:
div { width: 100px; height: 100px; } #box1 { position: absolute; background: red; top: 40px; left: 40px; } #box2 { background: blue; }
以上 CSS 和 HTML 片段中,由于 box1 是絕對定位(層級為“Z-index: 0”級),而 box2 是文檔流內塊級盒(層級為“塊級盒”級),因此 box1 會層疊在 box2 之上。下面添加如下 CSS 規則:
#box2 { opacity: .5; }
這時候, box2 則會層疊在 box1 之上了。因為 box2 的 opacity 為 0.5(小于 1),故視其為“Z-index: 0”級,也就和 box1 同級了。同級情況下,按照二者在源代碼中的順序,居后的 box2 又重新占領高地了。
讀者可以取下面規則之任意一條實驗,都能達到同樣效果:
#box2 { transform: scale(1); mix-blend-mode: difference; isolation: isolate; -webkit-filter: blur(5px); }2.3 transform 改變絕對定位子元素包含塊
transform 除了建立新的局部層疊上下文外,還會干一件事:改變絕對定位子元素的包含塊。須注意的是,固定定位也是絕對定位的一種。
什么是包含塊?有時候一些盒子根據矩形盒計算自身定位和大小,此矩形盒即包含塊。更多詳情請閱讀視覺格式化模型詳述。
固定定位元素
固定定位元素的包含塊由視口創建(如果讀者了解視覺格式化模型詳述的信息,也就知道這一點:在計算其“靜態位置”的時候,則以初始化包含塊作為其計算包含塊)。現在我們看以下源代碼:
div { width: 100px; height: 100px; } #fixed { position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: blue; } #transform { background: red; padding: 20px; }
這個時候,以視口為包含塊進行定位和大小計算, fixed 將會鋪滿整個屏幕。
但現在,我們加上如下規則:
#transform { transform: scale(1); }
此時,fixed 的包含塊不再是視口,而是 transform 的內邊距盒的邊緣盒了。故此時 fixed 的寬高均為 140px。
絕對定位元素
我們舉一個例子:
#relative { position: relative; width: 100px; height: 100px; background: green; } #absolute { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: blue; } #transform { background: red; width: 50px; height: 50px; }
此時 absolute 的包含塊為 relative 的內邊距盒的邊緣盒。由此 absolute 的寬高均為 100px。然后我們添加如下規則:
#transform { transform: scale(1); }
由于 transform 創建了局部層疊上下文,absolute 的包含塊不再是 relative 而是 transform 了,根據這一新的包含塊,得新寬和高為 50px。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/111152.html
摘要:歡迎來我的個人站點性能優化其他優化瀏覽器關鍵渲染路徑開啟性能優化之旅高性能滾動及頁面渲染優化理論寫法對壓縮率的影響唯快不破應用的個優化步驟進階鵝廠大神用直出實現網頁瞬開緩存網頁性能管理詳解寫給后端程序員的緩存原理介紹年底補課緩存機制優化動 歡迎來我的個人站點 性能優化 其他 優化瀏覽器關鍵渲染路徑 - 開啟性能優化之旅 高性能滾動 scroll 及頁面渲染優化 理論 | HTML寫法...
摘要:后來居上當元素的層疊水平一致層疊順序相同的時候,在流中處于后面的元素會覆蓋前面的元素。相關連接深入理解中的層疊上下文和層疊順序層疊順序探究分層的顯示 什么是層疊上下文(stacking context) 可以理解為一個dom節點在Z軸高人一等,特性類似于BFC,即層疊上下文的內部子元素再怎么翻江倒海,翻云覆雨都不會影響外部的元素。 CSS2創建層疊上下文的兩種方法(參考MDN) 根元...
摘要:栗子有兩個,被包裹在一個里,被包裹在另一個盒子里,同時為兩個和設置和屬性效果我們發下,雖然元素的值為,遠大于和的值,但是由于的父元素產生的層疊上下文的的值為,的父元素所產生的層疊上下文的值為,所以永遠在和下面。 前言 最近,在項目中遇到一個關于CSS中元素z-index屬性的問題,具體問題不太好描述,總結起來就是當給元素和父元素色設置position屬性和z-index相關屬性后,頁面...
閱讀 2337·2021-11-16 11:52
閱讀 2322·2021-11-11 16:55
閱讀 750·2021-09-02 15:41
閱讀 2981·2019-08-30 15:54
閱讀 3142·2019-08-30 15:54
閱讀 2251·2019-08-29 15:39
閱讀 1507·2019-08-29 15:18
閱讀 968·2019-08-29 13:00