乐趣区

关于css:CSS-属性-zindex

引子

最近在应用第三方组件的时候,发现无奈在一个弹窗外面再次失常笼罩已有弹窗。首先想到跟重叠层级属性 z-index 无关,于是再次回顾总结一下。

  • Origin
  • My GitHub

z-index

Name z-index
可取值 auto / <integer> / inherit
默认值 auto
实用于 定位元素
继承性

定位元素是指 position 的值为非 static 的元素。对于定位元素,z-index 属性指定了:

  • 盒子在以后重叠上下文(stacking context)中的重叠层级。
  • 盒子是否创立一个重叠上下文。

取值有上面的含意:

  • <integer>:是生成的盒子在以后重叠上下文中的重叠层级。这个盒子也会创立一个新的重叠上下文。
  • auto:生成的盒子在以后重叠上下文中的重叠层级是 0。这个盒子不会创立一个新的重叠上下文,除非是根元素。

在 CSS 2.1 中,每个盒子在三个纬度上,都有一个地位。除了它们的垂直和程度地位,盒子沿着“Z 轴”排列,且在另外某个层级之上格式化。当盒子在视觉上重叠时,与 Z 轴的地位关系密切。接下来会探讨盒子在 Z 轴上可能如何搁置。

渲染树绘制到画布上的程序是依据重叠上下文形容的。重叠上下文能够蕴含更多的重叠上下文。从父重叠上下文的角度来看,堆栈上下文具备原子单一性。

每个盒子属于一个重叠上下文。在给定的重叠上下文 A 中,每个已定位的盒子领有一个整数重叠层级,该整数重叠层级在 Z 轴上的地位,是绝对于在重叠上下文 A 中的其它重叠层级。

重叠层级高的盒子总是在重叠层级低的盒子之上格式化。盒子也可能有负的重叠层级。在同一重叠上下文中,雷同的重叠层级依据文档树的程序从后到前重叠。

根元素造成根重叠上下文。其它重叠上下文,由领有 z-index 属性值是 auto 之外有效值的任何非 static 定位元素产生。重叠上下文不肯定与蕴含块无关。在未来的 CSS 层级中,其它属性可能会引入重叠上下文,例如 opacity

在每个重叠上下文中,上面的层级依照从后到前的程序绘制:

  1. 造成重叠上下文元素的背景和边逛。
  2. 负重叠层级的后辈重叠上下文。
  3. 在文档流,非内联,非定位后辈。
  4. 非定位浮动。
  5. 在文档流,内联,非定位后辈,包含内联表格和内联块。
  6. 重叠层级为 0 的后辈重叠上下文和重叠层级为 0 的定位后辈。
  7. 有负数重叠层级的后辈重叠上下文。

在每个堆栈上下文中,重叠级别为 0、非定位浮动、内联块和内联表的定位元素,绘制时如同这些元素自身生成了新的堆栈上下文,但其定位的子体和任何可能的子重叠上下文都参加以后重叠上下文。

这个绘制程序递归的利用于每一个重叠上下文,具体的定义见 Appendix E。

依据下面的规范形容,联合常见的状况,进一步了解。

示例

雷同层级重叠

这是示例页面,挪动端拜访如下:

后面有介绍,z-index 指定了在以后重叠上下文中的重叠层级,因而先要确定示例中的三个元素所在的重叠上下文是谁建设的。示例中只有三个元素及其父元素是定位元素,父元素没有指定 z-index,所以其所在的重叠上下文由根元素建设。z-index 的值越大,显示越凑近用户,符合标准中的形容。

不同层级重叠

不同层级之间还能够分为:父元素都没有重叠层级、父元素之一有重叠层级、父元素都有重叠层级。

这是示例页面,挪动端拜访如下:

针对下面的景象,别离依据规范进行解析:

  • 父元素都没有重叠层级:首先找出有重叠层级元素所在重叠上下文,发现示例中重叠上下文是根元素造成,z-index 值越大,显示越凑近用户,所以 容器 1 后辈显示在 容器 2 后辈 之上。
  • 父元素之一有重叠层级:示例中有 3 个元素领有重叠层级,容器 2 后辈 容器 1 所在重叠上下文是根元素造成,容器 2 后辈 z-index 值更大,显示更凑近用户,所以 容器 2 后辈 显示在 容器 1 之上。依据规范,重叠上下文能够蕴含更多的重叠上下文,后辈重叠上下文的绘制是在父重叠上下文内,因而 容器 2 后辈 显示在 容器 1 后辈 之上。
  • 父元素都有重叠层级:示例中有 4 个元素领有重叠层级,容器 1 容器 2 所在重叠上下文是根元素造成,容器 1z-index 值更大,因而 容器 1 显示在 容器 2 之上。各自的后辈都是基于父级重叠层级进行绘制,因而 容器 1 显示在 容器 2 后辈 之上,容器 1 后辈 显示最靠近用户。

参考资料

  • z-index MDN
  • z-index Recommendation
  • z-index draft
退出移动版