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>

？或不？所有正数（增加值）是否会以最后一个位于顶部，中间位于中间，第一个位于底部？

我正在向W3Schools学习，他们对此的教训非常混乱！：（

提前多多感谢！

Answer 1

允许使用正整数和正整数。

必须在元素上设置位置。

在我了解这些细节之前，让我从头开始解释z-index。

每个网页都由所谓的堆叠上下文组成。您可以将这些视为一堆元素。 z-index属性确定每个堆栈中项目的顺序，更高的z-index被放置得更高。

所有页面都以根堆叠上下文开头，后者根据根元素构建（正如您所期望的那样）。但是可以通过多种方式创建更多堆叠上下文。一种方法是绝对定位的div;它的孩子将处于一个新的堆叠环境中。

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

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

In this example，我们期望蓝色div在其z-index的灰色顶部之上，对吗？但是，正如你所看到的，它位于底部。当然，这是因为我们没有确定其立场。 Once we do that它显示为我们所期望的。 同样，您必须设置位置。

规格也告诉我们负值很好。话虽如此，你不需要使用负值。使用正整数也是完美的。元素的默认z-index值为0.

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

Answer 2

在我开始解释之前，请注意，如果元素的呈现值为z-index，position:relative或{{position:absolute，position:fixed只会产生影响1}}（不是static）因为每个都有自己的stacking context。这意味着，initial或inherit等值可能会或可能不会根据具体情况发挥作用。

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

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

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

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

顶级
顶级兄弟

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

z-index允许我们做什么实质上是重新排序此列表（在某些范围内）。 z-index越高，我们的元素列表就越远。

我会在这里使用内联CSS来显示它，但你应该绝对避免在生产代码中使用内联CSS。

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

现在，我们将子列表更改为：

顶级兄弟
顶级 - 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. 子级别 - z-index1
顶级兄弟

因此，我们看看我们的顶级水平，看看哪一个位于列表的底部。在这种情况下，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. 子级兄弟
2. 子级别兄弟 - z-index1
3. 子级别 - z-index2
顶级兄弟
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>

子列表树看起来像这样：

子级别 - z-index-1
1. 顶级
顶级兄弟

从上到下的分层将是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>

列表表示：

子级别 - z-index-1
1. 顶级
  1. 子级别
顶级兄弟

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

关于它！如果您仍然对了解更多内容感兴趣，请务必阅读the specs。

请注意，other properties（包括但不限于opacity，transform和will-change会创建自己的堆叠上下文，并可能对渲染产生影响元素的顺序。

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

Answer 3

儿童在父母之上呈现的规则的唯一例外是孩子的z指数为负值。当给出负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只是您要找的链接！他真的很好地解释了。基本上，它的数字越高，堆栈中的数字越高。因此1位于0之上，-1位于z指数0之下，但是它们应该保持正数，因为它们没有理由使用负数并且被认为是不好的做法。浏览器在呈现页面时会解释，就像任何其他CSS或HTML代码一样。

希望这能帮到你！

z-index如何真正起作用？

5 个答案: