CSS 层叠上下文

Question

一个元素的层叠水平决定了在同一个层叠上下文中元素在z轴上的显示顺序，懂 PS 的人会很容易理解，我们可以把层叠水平不同的元素想象成不同的图层，另外层叠水平相同的元素出现的先后顺序也决定了图层的前后顺序。

层叠顺序

层叠准则

前提：在同一个层叠上下文领域中

• z-index 大的覆盖 z-index 小的
• 层叠水平、顺序相同时，dom 流后的覆盖 dom 流前面的

层叠上下文的创建

• 页面根元素
• position 值为 relative/absolute，且 z-index 值不是 auto
• position 值为 fixed
• 其他 css3 属性：
  • 布局为 flex、inline-flex，同时 z-index 不为 auto
  • opacity 不为 1
  • transform 值不是 normal
  • filter 值不是 none
  • isolation 值为 isolate
  • will-change 值为上述除 1 外的任一个
  • -webkit-overflow- scrolling 为 touch