解題不考慮相容性,題目天馬行空,想到什麼說什麼,如果解題中有你感覺到生僻的 CSS 屬性,趕緊去補習一下吧。
不斷更新,不斷更新,不斷更新,重要的事情說三遍。
3、層疊順序(stacking level)與堆棧上下文(stacking context)知多少?
z-index
看上去其實很簡單,根據 z-index
的高低決定層疊的優先順序,實則深入進去,會發現內有乾坤。
看看下面這題,定義兩個 p
A 和 B,被包括在同一個父 p
標籤下。HTML結構如下:
<p class="container"> <p class="inline-block">#pA display:inline-block</p> <p class="float"> #pB float:left</p></p>
它們的 CSS
定義如下:
.container{ position:relative; background:#ddd;}.container > p{ width:200px; height:200px;}.float{ float:left; background-color:deeppink;}.inline-block{ display:inline-block; background-color:yellowgreen; margin-left:-100px;}
大概描述起來,意思就是擁有共同父容器的兩個 p 重疊在一起,是 display:inline-block
疊在上面,還是float:left
疊在上面?
注意這裡 DOM 的順序,是先產生 display:inline-block
,再產生 float:left
。當然也可以把兩個的 DOM 順序調轉如下:
<p class="container"> <p class="float"> #pB float:left</p> <p class="inline-block">#pA display:inline-block</p></p>
會發現,無論順序如何,始終是 display:inline-block
的 p
疊在上方。
這裡其實是涉及了所謂的層疊水平(stacking level),有一張圖可以很好的詮釋:
運用的邏輯,上面的題目就迎刃而解,inline-blcok
的 stacking level
比之 float
要高,所以無論 DOM 的先後順序都堆疊在上面。
不過上面圖示的說法有一些不準確,按照 W3官方 的說法,準確的 7 層為:
the background and borders of the element forming the stacking context.
the child stacking contexts with negative stack levels (most negative first).
the in-flow, non-inline-level, non-positioned descendants.
the non-positioned floats.
the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.
the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.
the child stacking contexts with positive stack levels (least positive first).
稍微翻譯一下:
形成堆疊上下文環境的元素的背景與邊框
擁有負 z-index
的子堆疊上下文元素 (負的越高越堆疊層級越低)
正常流式布局,非 inline-block
,無 position
定位(static除外)的子項目
無 position
定位(static除外)的 float 浮動元素
正常流式布局, inline-block
元素,無 position
定位(static除外)的子項目(包括 display:table 和 display:inline )
擁有 z-index:0
的子堆疊上下文元素
擁有正 z-index:
的子堆疊上下文元素(正的越低越堆疊層級越低)
所以我們的兩個 p
的比較是基於上面所列出來的 4 和 5 。5 的 stacking level
更高,所以疊得更高。
不過!不過!不過!重點來了,請注意,上面的比較是基於兩個 p
都沒有形成 堆疊上下文
這個為基礎的。下面我們修改一下題目,給兩個 p
,增加一個 opacity
:
.container{ position:relative; background:#ddd;}.container > p{ width:200px; height:200px; opacity:0.9; // 注意這裡,增加一個 opacity}.float{ float:left; background-color:deeppink;}.inline-block{ display:inline-block; background-color:yellowgreen; margin-left:-100px;}
Demo戳我。
會看到,inline-block
的 p
不再一定疊在 float
的 p
之上,而是和 HTML 程式碼中 DOM 的堆放順序有關,後添加的 p 會 疊在先添加的 p 之上。
這裡的關鍵點在於,添加的 opacity:0.9
這個讓兩個 p 都產生了 stacking context(堆疊上下文)
的概念。此時,要對兩者進行層疊排列,就需要 z-index ,z-index 越高的層疊層級越高。
堆疊上下文是HTML元素的三維概念,這些HTML元素在一條假想的相對於面向(電腦螢幕的)視窗或者網頁的使用者的 Z 軸上延伸,HTML 元素依據其自身屬性按照優先順序順序佔用層疊內容相關的空間。
那麼,如何觸發一個元素形成 堆疊上下文
?方法如下,摘自 MDN:
根項目 (HTML),
z-index 值不為 "auto"的 絕對/相對定位,
一個 z-index 值不為 "auto"的 flex 項目 (flex item),即:父元素 display: flex|inline-flex,
opacity 屬性值小於 1 的元素(參考 the specification for opacity),
transform 屬性值不為 "none"的元素,
mix-blend-mode 屬性值不為 "normal"的元素,
filter值不為“none”的元素,
perspective值不為“none”的元素,
isolation 屬性被設定為 "isolate"的元素,
position: fixed
在 will-change 中指定了任意 CSS 屬性,即便你沒有直接指定這些屬性的值
-webkit-overflow-scrolling 屬性被設定 "touch"的元素
所以,上面我們給兩個 p 添加 opacity 屬性的目的就是為了形成 stacking context。也就是說添加 opacity 替換成上面列出來這些屬性都是可以達到同樣的效果。
在層疊上下文中,其子項目同樣也按照上面解釋的規則進行層疊。 特別值得一提的是,其子項目的 z-index 值只在父級層疊上下文中有意義。意思就是父元素的 z-index
低於父元素另一個同級元素,子項目 z-index
再高也沒用。
理解上面的 stacking-level
與 stacking-context
是理解 CSS 的層疊順序的關鍵。