总结下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
https://juejin.cn/post/6844903667175260174#heading-8
浙公网安备 33010602011771号