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；它的子级将处于新的堆叠环境中。

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

就像我之前说的，z-index只有在您 明确
设置元素的位置后才能生效。这意味着将其设定为fixed，absolute或relative。我认为这是最好的例子。

在此示例中，我们期望蓝色div的z索引位于灰色的顶部，对吗？但是，正如您所看到的，它在底部。当然，这是因为我们尚未设定位置。一旦执行此操作，它就会按预期显示。
同样，您必须设置position 。

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

据记录，w3schools是一个众所周知的不可靠的学习资源。尽管它可以是一种快速便捷的资源，但它们的信息仍然存在很多空白，有时甚至是错误的信息。我建议您使用更可靠的资源，例如Mozilla开发人员网络，以及规范本身