css层叠上下文

发表于2020-07-02更新于2020-07-08

“层叠上下文”描述了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与层叠上下文;

在相同层叠上下文的情况下,元素之间会按”层叠水平”的优先级排序(以下从低至高):

  • background/border;
  • 负值z-index;
  • block块状水平盒子;
  • float浮动盒子;
  • inline\inline-block水平盒子;
  • z-index:0\auto;
  • 正值z-index;

如果是在不同的层叠上下文中，先找到共同的祖先层叠上下文，然后比较共同层叠上下文下这个两个元素所在的局部层叠上下文的层叠水平

分析详见:
前端面试之层叠上下文(z-index)