20

实际效果如何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>

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

4

5 回答 5

49

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

必须在元素上设置位置。

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

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

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

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

正如我之前所说，只有明确设置元素的位置z-index才会生效。这意味着将其设置为、或。我认为，这最好通过示例来说明。fixedabsoluterelative

在这个例子中，考虑到它的 z-index，我们希望蓝色 div 位于灰色 div 之上，对吧？但是，如您所见，它位于底部。这当然是因为我们还没有确定它的位置。一旦我们这样做，它就会按照我们的预期显示。同样，您必须设置位置。

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

郑重声明，w3schools 是出了名的不可靠的学习资源。虽然它可以是一个快速方便的资源，但他们的信息有很多空白，有时甚至是错误的信息。我建议您使用更可靠的资源，例如Mozilla Developer Network，以及规范本身。

于 2013-01-18T01:44:12.240 回答
7

在我开始解释之前，让我注意z-index只有当元素渲染position:relative了,position:absolute或position:fixed(NOT ) 的值时才会产生影响，static因为它们中的每一个都使它有自己的堆叠上下文。这意味着喜欢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 结构不正确。

就是这样！如果您仍然有兴趣了解更多信息，阅读规格总是好的。

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

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

于 2015-11-26T20:49:34.897 回答
1

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

于 2018-02-13T09:17:57.323 回答
0

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

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

在 CSS 2.1 中，每个框在三个维度上都有一个位置。除了它们的水平和垂直位置之外，盒子还沿着“z 轴”放置，并且被格式化为一个在另一个之上。当框在视觉上重叠时，Z 轴位置特别重要。

于 2013-01-18T01:41:33.160 回答
-1

z-index 上的这篇文章正是您要寻找的链接！他真的解释得很好。

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

于 2013-01-18T01:42:06.890 回答