对 z-index 的一些理解

z-index

概念

  • Stacking Context

    层叠上下文是一种三维概念,在页面中页面元素在 Z 轴的延伸,按照顺序占用层叠上下文的空间

  • Stacking Level

    层叠水平决定在同一个层叠上下文中的元素在 Z 轴上的显示顺序

  • Stacking Order

    元素发生重叠时按照特定的优先级顺序展示。

    Stacking ContextStacking Level 是抽象的概念,Stacking Order 是具体的执行规则

创建层叠上下文

与 BFC 类似,SC 也需要通过特定的 CSS 规则触发:

  • 根层叠上下文:页面根元素 <html> 默认有层叠上下文
  • 包含 positionrelativeabsolute 的定位元素,其 z-index 属性不是 auto
  • 包含 positionfixedsticky 的定位元素(IE 及一些低版本的现代浏览器仍需要 z-index 配合触发 )
  • z-index 属性不为 auto 的 Flex 子项(父元素 dispalay: flex | inline-flex
  • z-index 属性不为 auto 的 Grid 子项(父元素 dispalay: grid | inline-grid
  • opacity 属性不为 1 的元素
  • mix-blend-mode 属性不为 normal 的元素
  • transform 属性不为 none 的元素
  • filter 属性不为 none 的元素
  • perspective 属性不为 none 的元素
  • clip-path 属性不为 none 的元素
  • maskmask-imagemask-border 属性不为 none 的元素
  • isolation 属性为 isolate 的元素
  • -webkit-overflow-scrolling 属性为 touch 的元素
  • will-change 属性不为空的元素
  • contain 属性为 layoutpaintstrictcontent 的元素

层叠顺序

  • 同一层叠上下文中的元素重叠时,按照下图的层叠顺序渲染

    • z-index 大的元素覆盖 z-index 小的元素
    • 相同 z-index 值的元素,后面元素覆盖前面元素
  • 非同一层叠上下文的元素发生重叠时,按上图的规则对比父级(各自的层叠上下文)的层叠顺序进行渲染

参考