关于css:CSS-属性-zindex

3次阅读

共计 1735 个字符，预计需要花费 5 分钟才能阅读完成。

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

Origin
My GitHub

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。

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

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

在每个堆栈上下文中，重叠级别为 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 所在重叠上下文是根元素造成，容器 1 的 z-index 值更大，因而 容器 1 显示在 容器 2 之上。各自的后辈都是基于父级重叠层级进行绘制，因而 容器 1 显示在 容器 2 后辈 之上，容器 1 后辈 显示最靠近用户。