小编典典

z-index属性实际上如何工作?

css

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>

或不?所有正数(以递增值表示)会以最后一个在顶部,中间在中间,第一个在底部为结尾吗?


阅读 319

收藏
2020-05-16

共1个答案

小编典典

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

必须在元素上设置位置。

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

每个网页都由所谓的堆栈上下文组成。从字面上看,您可以将它们视为元素的堆栈。z-index属性确定每个堆栈中项目的顺序,其中较高的z-index放置在更上方。

所有页面均以根堆栈上下文开头,该上下文从根元素开始构建(如您所愿)。但是,可以通过多种方式创建更多的堆栈上下文。一种方法是绝对定位div;它的子级将处于新的堆叠环境中。

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

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

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

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

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

2020-05-16