在基于组件的Web应用程序中管理Z-Index【译】

Z-index尽管有关于此的所有内容，该财产仍然被广泛误解和处理不当。在复杂的单页Web应用程序中堆叠问题可能会成为一个主要的痛苦。但是，坚持一些原则，我们可以轻松地避免这些问题。

如果您已经完成了任何复杂的Web UI开发，那么您必须至少曾经疯狂地尝试过驱动一个元素z-index高达数千个元素，但却发现它并没有帮助将它置于其他元素之上，而其他元素的元素z-index较低甚至没有定义在所有。

为什么会这样？更重要的是，如何避免此类问题？

在本文中，我将概述z-index实际情况以及如何停止猜测它是否可以在任何特定情况下工作并开始像任何其他方便的工具一样处理它。

堆叠上下文的层次结构

如果您将网页想象为具有三个维度，那么z-index是一个定义z元素坐标的属性（也称为“堆叠顺序”）：值越大，元素越接近观察者。您还可以将其视为影响绘制顺序的属性，这实际上更加正确，因为屏幕是像素的二维网格。因此，z-index值越大，元素在页面上绘制的越晚。

然而，有一个主要的复杂因素。该z-index值空间是不平坦-这是分层次的。元素可以创建堆叠上下文，该上下文成为z-index其后代值的根。最好通过一个例子来解释堆叠上下文的概念。

1.该文件的身体有五个div子孙div1，div2，div3，div1-1，和div2-1。它们都是绝对定位的并且彼此重叠。div1-1是一个孩子div1，div2-1是一个孩子div2。

图片1.png

让我们试着理解为什么我们看到我们看到的东西。有很详细的规则来确定油漆订单，但在这里我们只需要比较两件事：

· z-index 值 如果元素具有更高的值z-index，则稍后绘制。

· 源顺序 如果z-index值是相同的，那么它在源中的后者，它的绘制时间越晚。

因此，如果我们不考虑堆叠上下文，则订单应如下：

· div1

· div2

· div3

· div1-1

· div2-1

请注意，div2-1实际上是重叠的div3。为什么会这样？

如果一个元素被称为创建一个堆叠上下文，它会为其子元素的z-index值创建一个基础，因此在确定绘制顺序时，它们永远不会与堆叠上下文之外的任何内容进行比较。换句话说，当一个创建堆叠上下文的元素被绘制时，它的所有子元素都在它之后和它的任何兄弟之前绘制。

回到这个例子，body后代div 的实际绘制顺序是：

· div1

· div2

· div3

· div1-1

注意div2-1列表中没有- 它是一个孩子，div2它创建了一个堆叠上下文（因为它是一个绝对定位的元素，z-index而不是默认值auto），所以它是在之后div2，但之前绘制的div3。

div1不创建堆叠上下文，因为它的隐式z-index值是auto，所以div1-1（它的子）被绘制在之后div2和div3（因为它的z-index10，大于div2和div3）。

注意：熟悉一般油漆订单规则（实际上非​​常复杂）也很棒。

然而，这篇文章的主要内容是如何处理z-index页面由数十个和数百个组件组成的时间，每个组件可能都有z-index定义的子项。
一起来学习啊～