掌握CSS中的z索引

CSS中的z-index属性：掌控页面元素层叠顺序的利器

本文探讨CSS中的z-index属性，它用于控制页面元素的层叠顺序。数值较高的元素会显示在数值较低的元素之上。这类似于页面上的x轴和y轴分别控制元素的水平和垂直位置，z-index则控制元素在z轴上的堆叠顺序。

关键要点：

• CSS中的z-index属性控制页面元素的堆叠顺序，数值越高，元素显示在越上面。它仅作用于position属性值为absolute、relative或fixed的元素。
• 通过设置position: relative，且不为top、right、bottom或left属性赋值，即可控制元素的堆叠顺序，而无需改变其在页面上的原始位置。
• z-index值的解析在其父级堆叠上下文内进行，这意味着即使元素的z-index值较高，如果其父容器的z-index值较低，该元素仍可能显示在其他元素之下。
• 为提高组织性和灵活性，建议使用100的增量设置z-index值。这种方法在两个现有层之间添加新层时，提供了99个可用的数值选择。

默认堆叠顺序

在编写HTML时，文档中靠后的元素默认会堆叠在靠前的元素之上。

<header class="site-header"></header>
<main class="site-content"></main>
<footer class="site-footer"></footer>

在这个HTML片段中，如果所有元素都设置为重叠，则页脚会堆叠在主体内容之上，主体内容又会堆叠在页眉之上。

通过结合position属性和top、right、bottom、left偏移属性，可以使元素重叠。

如果将每个元素的position属性设置为absolute，它们将全部重叠。由于页脚在文档中最后出现，因此默认情况下会堆叠在前面两个元素之上。

.site-header, .site-content, .site-footer {
  position: absolute;
  width: 400px;
  padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}

使用偏移属性top和left，可以更清晰地看到元素的堆叠顺序。

堆叠上下文

虽然使用position: absolute可以创建重叠的元素，但这并没有创建所谓的堆叠上下文。

堆叠上下文可以通过以下几种方式创建：

• 元素具有position: absolute或relative属性，且z-index值不是auto。
• flexbox项目具有非auto的z-index值。
• 元素的不透明度(opacity)小于1。
• 元素的transform属性设置为非none值。

创建和使用堆叠上下文的常见方法是第一种，让我们重点关注一下。

回到之前的例子，我们有三个元素彼此重叠，但目前它们没有z-index值。

z-index属性允许我们控制堆叠顺序。

如果我们将页脚的z-index设置为1，主体的z-index设置为2，页眉的z-index设置为3，则默认堆叠顺序可以完全反转。

表面上看起来很简单：z-index值越高，元素堆叠得越高——因此z-index: 9999将始终位于z-index: 9之上。不幸的是，实际情况比这更复杂。

堆叠上下文中的z-index

<header class="site-header"></header>
<main class="site-content"></main>
<footer class="site-footer"></footer>

如果在site-content容器内添加一个盒子，并将其定位在右下角之外，我们会看到它位于绿色盒子之上，粉色盒子之下。

.site-header, .site-content, .site-footer {
  position: absolute;
  width: 400px;
  padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}

根据我们对z-index的了解，我们可能认为要使这个黄色盒子显示在粉色盒子之上，我们只需为z-index设置一个更高的值。

如果我们将z-index设置为4（高于z-index: 3），我们不会看到任何变化。人们通常会尝试使用非常大的数字（如9999）来强制堆叠，但这也没有效果。在代码库中看到这样的z-index值是一种代码异味，因此如果可以，请尽量避免。

我们无法获得黄色盒子位于粉色盒子之上的预期结果的原因在于z-index在堆叠上下文中的行为方式。

为了演示这一点，让我们来看一个稍微复杂的例子，这个例子我借鉴了MDN网站。

...(此处省略了MDN例子中的HTML和CSS代码，因为篇幅过长，但保留了关键的解释部分)...

所有这些都可以通过这样一个事实来解释：所有z-index值都在其父堆叠上下文内解析。因为父容器.site-content的z-index值高于页脚，所以.site-content内的所有定位元素都在该上下文中进行评估。

理解堆叠上下文内元素的堆叠顺序，可以将其类比为嵌套有序列表中的子项。

这可以写成如下：

• 页眉：z-index: 5
• 主体：z-index: 4
  • 盒子1：z-index: 4.6
  • 盒子2：z-index: 4.1
  • 盒子3：z-index: 4.3
• 页脚：z-index: 2

因此，即使页眉的z-index是5，盒子1的z-index是6，它的渲染顺序是4.6，仍然小于5。因此，盒子1显示在页眉之下。

起初这有点令人困惑，但是随着实践，它确实开始变得有意义了！

z-index仅适用于定位元素

如果要控制元素的堆叠顺序，可以使用z-index。但是，只有当元素的position值为absolute、relative或fixed时，z-index才会生效。

使用position精确放置元素非常适合构建复杂的布局或有趣的UI模式，但通常希望在不移动元素在页面上的原始位置的情况下控制堆叠顺序。

如果是这种情况，可以只设置position: relative，但不为top、right、bottom或left提供任何值。元素将保留在其在页面上的原始位置，文档流不会中断，并且z-index值将生效。

可以使用负z-index值

分层元素通常用于构建复杂的形状或UI组件。这通常意味着将元素彼此叠加，z-index值不断增加。要将元素放置在另一个元素的下方，它只需要具有较低的z-index值，而该较低的值可以为负值。

这在使用伪元素并希望将其定位在其父元素内容之后时非常有用。

由于堆叠上下文的工作方式，如果:before或:after元素要定位在其父元素文本内容之后，则需要在其上设置负z-index值。

z-index策略

让我们总结一下我在项目中应用z-index时使用的一个简单策略。

前面我们使用了z-index值的个位数增量，但是如果要在设置为z-index: 3和z-index: 4的两个元素之间添加一个新元素呢？您必须更改许多值——可能在整个代码库中，这可能会导致问题，并可能导致网站其他部分的CSS中断。

使用100的步长设置z-index

在处理z-index时，经常会看到这样的代码：

<header class="site-header"></header>
<main class="site-content"></main>
<footer class="site-footer"></footer>

在我看来，这看起来很糟糕（并且在附加!important后只会变得更糟）。看到这样的值通常表明开发人员不理解堆叠上下文，并试图强制一层位于另一层之上。

与其使用9999、53或12之类的任意数字，我们可以系统化我们的z-index比例，并为流程带来更多秩序。这不仅仅是因为我有开发人员强迫症。说真的。

我没有使用z-index的个位数增量，而是使用100的增量。

.site-header, .site-content, .site-footer {
  position: absolute;
  width: 400px;
  padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}

我这样做是为了保持事物的组织性，同时也注意到了项目中使用的许多不同层。另一个好处是，如果需要在两个其他层之间添加一个新层，则可以在两者之间选择99个潜在的值。

在构建z-index系统时，这种手动方法非常可靠，但与Sass之类的预处理器结合使用时，可以使其更灵活。

...(此处省略了FAQs部分，因为与之前的输出内容重复性较高)...

以上是掌握CSS中的z索引的详细内容。更多信息请关注PHP中文网其他相关文章！