强大的CSSz-index属性

在本文中，您将了解如何使用 z-index CSS 属性……使用 CSS 进入第三维的唯一方法！

大多数情况下，当您使用 CSS 设置样式时，它是在 2D 平面上。 HTML 元素水平/垂直放置在页面上，就像俄罗斯方块中的堆叠块一样。 z-index 改变了这种范式，使您能够在第三个平面上定义视觉层次：z 轴。

---

在此代码片段中，#navbar 将与 #footer 重叠（如果它们的位置重叠），因为它具有更高的 z-index。

#navbar {
  position: relative;
  z-index: 11;
}

#footer {
  position: relative;
  z-index: 10;
}

如果我们根本不使用 z-index，导航栏会简单地将页脚推开而不是重叠它。

z-index 的用途

看代码本身有点抽象，所以让我们看看这个使用 z-index 的演示。

参见 CodePen 上 alligatorio (@alligatorio) 的 Pen eYZEoVL。

<div>
  <img src="https://assets.digitalocean.com/articles/docker_node_image/sammy.png" />
</div>
<div id="magazine-title">
  Sammy the Shark
</div>

#portrait {
  position: relative;
  z-index: 1
  width: 200px;
}

#magazine-title {
  position: relative;
  z-index: 2;
  top: -2em;
  left: 2em;
  font: normal 2em sans-serif;
  color: darkslategray;
  background-color: whitesmoke;
  border: 3px dotted darkslategray;
}

使用 z-index，我们可以使文本与图像重叠！ 这只是层为您介绍网页设计的不同方式的一种小方法。

一个小警告

如果您有敏锐的眼光，您可能会注意到前面的代码片段使用 position: relative 和 z-index。 这不是巧合：z-index 规则仅适用于“定位元素”。

忘记应用 position 规则将有效地忽略 z-index 规则。

div {
  position: static | relative | absolute | sticky | fixed;
  z-index: 1;
}

定位元素 是一个 HTML 元素，它可以是相对的、绝对的、固定的或粘性的。 基本上，它是除了静态之外的任何东西。

兄弟之争

另一个小提示是 z-index 只在同级 HTML 元素之间竞争。

给定两个 HTML 元素，深度嵌套的 HTML 元素 将始终与具有较低 z-index 值 的嵌套较少的 HTML 元素重叠。

这是一个演示 z-index 仅在同级 HTML 元素之间竞争的演示：

<div class="blue">
  <div class="violet"></div>
  <div class="purple"></div>
</div>
<div class="green"></div>

.blue {
  position: relative;
  z-index: 2;
  background-color: blue;
}
.violet {
  position: relative;
  z-index: 4;
  background-color: violet;
}
.purple {
  position: relative;
  z-index: 1;
  background-color: purple;
}
.green {
  position: relative;
  z-index: 3;
  background-color: green;
  top: -4em;
}

HTML 元素 div.violet 将与 div.green 重叠，尽管 z-index 值更高！

z-index 的值必须是正/负整数。 这并不意味着您可以拥有无限的 z 轴层！ 最大范围为 ±2147483647。

在 CSS 代码库中，您经常会看到 999、9999 或 99999 的 z-index 值。 这可能是确保元素始终位于顶部的一种懒惰方式。 当多个元素需要放在首位时，它可能会导致问题。 大多数情况下，您会发现 1 或 2 的 z-index 足以满足您的需求。

包起来

让我们回顾一下我们学到的关于 z-index 的一些内容：

• z-index可以在z轴上创建重叠层！
• z-index 仅适用于 定位元素
• z-index 仅与兄弟 HTML 元素竞争

当您对内容进行分层时，它可以创建有趣的设计！ 希望您对 z-index 的工作原理以及一些指导方针有了很好的了解，以便您可以成功使用它！

访问 MDN 以获取有关 z-index 属性的深入文档。