總結下CSS層疊知識點
阿新 • • 發佈：2021-01-20
總結下CSS層疊知識點
”層疊上下文“和”層疊等級“
- 普通元素的層疊等級優先由所在層疊元素決定
- 層疊等級只有層疊上下文元素中才有意義。不同層疊上下問比較是沒有意義的。
如何產生”層疊上下文“
- HTML中的根元素
<html>本身就具有層疊上細紋，成為層疊上下文 - 普通元素設定position屬性為非static值或者是z-index屬性具體值。產生層疊上下文
- CSS3中的新屬性也可以產生層疊上下文
層疊順序
- 層疊順序表示元素髮生層疊式按照特定的順序規則在Z軸上垂直顯示。
- 左上角”層疊上下文
background/border“指的是層疊上下文元素的背景和邊框 - 考慮層疊順序
z-index:auto和z-index:0在同一層級，但這兩個屬性本身是沒有根本區別的。
判斷技巧
- 首先先看比較兩個元素是否處在同一個層疊上下文中。
1.1 如果是，誰的層疊等級大，誰在上面
1.2 如果兩個元素不在統一層疊上下文中，請先比較他們所在的層疊上下文的層疊等級 - 當兩個元素層疊等級相同，層疊順序相同，在DOM結構中後面的元素層疊等級在前面元素上
CSS3中的屬性對層疊上下文的影響
- 父元素的
display屬性值為flex|inline-flex,子元素z-index屬性不為auto時候，子元素為層疊上下文元素 - 元素的
opactiy屬性不為1； - 元素的
transform屬性不是none - 元素
mix-blend-mode屬性補位normal - 元素
filter屬性不為none - 元素
isolation屬性是lsolate will-change指定的屬性值為上面任意一個- 元素的
-webkit-overflow-scrolling屬性值為touch