“层叠上下文”描述了DOM元素在页面中形成的一种堆叠关系,它的一些规则决定了元素在页面z轴展现的先后顺序,这也解释了z-index值很高的元素会被一些值比较低的元素遮挡等等现象.
某个dom元素触发“层叠上下文”是有以下条件的:
- z-index 值不为 “auto”的 绝对/相对/绝对定位;
- flex 项(父元素 display 为 flex|inline-flex)，需要配合z-index;
- opacity 属性值小于 1 的元素;
- transform 属性值不为 “none”的元素;
- mix-blend-mode 属性值不为 “normal”的元素;
- perspective值不为“none”的元素;
- filter与层叠上下文;