z-index 属性如何真正起作用？

Question

z-index 实际上是如何工作的？ 它是否适用于未指定 position 的元素？ 它是否偏爱具有指定position 的元素（即将它们放在顶部）？

数字必须像这样为负数吗？

<div style='z-index:-2;'>below</div>
<div style='z-index:-1;'>less below</div>
<div style='z-index:0;'>on top</div>

还是不行？所有正数（递增值）是否会以最后一个在顶部，中间在中间，第一个在底部？

Answer 1

负整数和正整数都可以。

必须在元素上设置位置。

不过，在我深入了解这些细节之前，让我从头开始解释一下z-index。

每个网页都由所谓的堆叠上下文组成。从字面上看，您可以将这些视为一堆元素。 z-index 属性决定了每个堆栈中项目的顺序，z-index 越高越靠上。

所有页面都以根堆叠上下文开始，该上下文从根元素构建（如您所料）。但是可以通过多种方式创建更多的堆叠上下文。一种方法是绝对定位的 div；它的孩子将在一个新的堆叠上下文中。

The specs 列出了所有创建新堆叠上下文的实例。正如其他人所说，这包括显式定位的元素，并且很快将包括不完全不透明的元素。

正如我之前所说，z-index 只有在您显式设置元素的位置时才会生效。这意味着将其设置为fixed、absolute 或relative。我认为最好通过示例来说明这一点。

In this example，考虑到它的 z-index，我们希望蓝色 div 位于灰色 div 之上，对吧？但是，如您所见，它位于底部。这当然是因为我们还没有确定它的位置。 Once we do that 它按照我们的预期显示。 同样，您必须设置位置。

规范还告诉我们，负值也可以。话虽如此，您需要使用负值。使用正整数也很好。元素的默认 z-index 值为 0。

郑重声明，w3schools 是众所周知的不可靠的学习资源。虽然它可以是一个快速方便的资源，但他们的信息有很多空白，有时甚至是错误的信息。我建议您使用更可靠的来源，例如 Mozilla Developer Network 和 the specs themselves。

Answer 2

在我开始解释之前，让我注意z-index 仅在元素的 rendered 值为 position:relative、position:absolute 或 position:fixed（而不是 static ) 因为每一个都使它有自己的stacking context。这意味着像 initial 或 inherit 这样的值可能会或可能不会工作，具体取决于具体情况。

另外请注意，在这篇文章中，我将使用格式 1.1.1 来表示我正在选择第一个元素的第一个子元素的第一个子元素。 2.1.1 将是第二个元素的第一个孩子的第一个孩子，依此类推。

---

我认为z-index 最好通过使用子列表进行类比来解释。让我们从最简单的例子开始：

<div class="top-level"></div>
<div class="top-level sibling"></div>

我们可以用这样的列表来表示：

1. 顶级
2. 顶级同级

现在默认情况下，列表下方的那些将呈现在它之前的顶部。所以在这种情况下，2 将位于 1 之上。

---

z-index 允许我们做的基本上是重新排序这个列表（在一定范围内）。 z-index 越高，我们的元素在列表中越靠后。

我将在这里使用内联 CSS 来简化显示，但您应该绝对避免在生产代码中使用内联 CSS。

<div class="top-level" style="z-index: 1;"></div>
<div class="top-level sibling"></div>

这现在将我们的子列表更改为如下所示：

1. 顶级同级
2. 顶级 - z-index:1

太棒了！现在我们的 HTML 中的第一个元素将呈现在我们的第二个元素之上。

---

当我们处理子（嵌套）元素时，这变得更加棘手。

考虑这种情况的一种更简单的方法是认为当一个元素开始被渲染时，它会在移动到任何兄弟元素之前渲染该元素的所有子元素。

还请记住，子列表不能更改级别，这意味着它们不能与父元素或子元素处于同一级别。

这意味着如果我们有以下内容：

<div class="top-level">
    <div class="sub-level" style="z-index: 1;"></div>
</div>
<div class="top-level sibling"></div>

我们的渲染子列表如下所示：

1. 顶层
   1. 子级别 - z-index1
2. 顶级同级

因此，我们查看顶层并查看列表底部的哪一个。在这种情况下，2.0 是，所以它将在 1.0 之上。然后我们查看它是否有任何子列表（子列表）。它没有，所以我们转到 1.0。

1.0 有一个子 1.1，它在视觉上会高于 1.0（就像我们没有给它一个 z-index 一样），但它仍然会低于 2.0，因为 1.0 低于 2.0。

因此这里的 z-index 对我们没有帮助，因为 1.1 没有任何兄弟姐妹。

---

让我们举一个稍微复杂一点的例子：

<div class="top-level">
    <div class="sub-level" style="z-index: 2;"></div>
    <div class="sub-level sibling"></div>
    <div class="sub-level sibling" style="z-index: 1;"></div>
</div>
<div class="top-level sibling">
    <div class="sub-level"></div>
</div>

此示例的子列表是什么？

我会给你的，不过你自己试试做也不错。

1. 顶层
   1. 子级兄弟
   2. 子级同级 - z-index1
   3. 子级别 - z-index2
2. 顶级同级
   1. 子级别

因此，就视觉上从上到下的顺序而言，顺序为 2.1、2.0、1.3、1.2。 1.1、1.0。

还不错吧？

无论有多深或有多少兄弟姐妹，这种行为都是正确的。

---

将子级呈现在父级之上的规则的唯一例外是子级具有否定的z-index。当给出负 z-index 时，它会将自身置于父元素之下。

因此，如果我们有以下内容：

<div class="top-level">
    <div class="sub-level" style="z-index: -1;"></div>
</div>
<div class="top-level sibling"></div>

子列表树如下所示：

1. 子级别 - z-index-1
   1. 顶级
2. 顶级同级

而从上到下的分层是 2.0、1.0、1.1。

一个稍微复杂一点的例子：

<div class="top-level">
    <div class="sub-level" style="z-index: -1;"></div>
    <div class="sub-level sibling"></div>
</div>
<div class="top-level sibling"></div>

列表表示：

1. 子级别 - z-index-1
   1. 顶层
      1. 子级别
2. 顶级同级

但您应该避免否定z-indexes。如果您认为需要它们，则很可能是您的 HTML 结构不正确。

---

就是这样！如果您仍然有兴趣了解更多信息，阅读the specs 总是不错的。

请记住，other properties，包括但不限于opacity、transform 和will-change，会创建自己的堆叠上下文，并且可能会影响元素的呈现顺序。

---

_{opacity 的工作方式类似于 z-index - 子级只能与其父级一样不透明 - 但不能有负值。}

Answer 3

子元素呈现在父元素之上的规则的唯一例外是子元素的 z-index 为负值。当给定负 z-index 时，它会将自身置于父元素之下。

Answer 4

css 属性z-index 仅适用于定位元素，这意味着元素必须是绝对位置、固定位置或相对位置，z-index 属性才能生效。

z-index 越高，它就越靠近前面。为z-index 属性指定的值可以是正数或负数。 z-index 值为 4 的定位元素将出现在 z-index 值为 3 的定位元素上方。

在 CSS 2.1 中，每个框在三个维度上都有一个位置。此外 对于它们的水平和垂直位置，框位于“z 轴”上 并在另一个之上格式化。 Z轴位置是 当框在视觉上重叠时尤其相关。

Answer 5

This article on z-index 正是您要查找的链接！他解释得真好。

基本上，数字越大，元素在堆栈中的位置就越高。所以 1 在 0 之上，而 -1 在 0 的 z-index 之下，但是它们应该保持正数，因为没有理由使用负数；这被认为是不好的做法。浏览器在呈现页面时对其进行解释，就像任何其他 CSS 或 HTML 代码一样。