html之z-index 属性是如何工作的

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> 

还是不行？所有正数(递增的值)都会以最后一个在顶部、中间在中间、第一个在底部结束吗？

请您参考如下方法:

允许负整数和正整数。

必须在元素上设置位置。

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

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

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

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

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

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

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

郑重声明，w3schools 是出了名的不可靠学习资源。虽然它可以是一种快速方便的资源，但他们的信息存在很多差距，有时甚至是错误的信息。我建议您使用更可靠的来源，例如 Mozilla Developer Network , 还有 the specs themselves .