层叠上下文(the stacking context)

层叠上下文是一个三维概念，想象一下HTML元素和面向视窗的用户之间存在一个z轴，元素是基于自身属性有序的来占据这个视窗空间。

层叠上下文的形成

• 文档根目录（html）
• position为absolute或者relative并且z-index值不为auto
• position为fixed或sticky
• flex容器的子元素并且z-index值不为auto
• grid容器的子元素并且z-index值不为auto
• opcity值小于1
• 有mix-blend-mode，且值不为normal
• 元素包含下列属性且值不为none
  • transform
  • filter
  • perspective
  • clip-path
  • mask/mask-image/mask-border
• isolation:isolate
• -webkit-overflow-scrolling:touch
• 有will-change属性，并且为非初始化值
• contain值为layout或paint或一个包含它们其中一个的组合值（例如contain:strict，contain:content）