z-index只影响同一分组中的项目吗？

Question

我试图在我的html中放置一些东西，它位于不同的区域但是具有高z-index，所以它应该在顶部。这有什么作用？

我的例子是这样的：

<div>
   <div style="z-index: 7000"></div>
</div>
<div style = "z-index: 7050"></div>

我当时认为z-index只与DOM树中的兄弟姐妹有关。

你们对此有何看法？

Answer 1

这张图片很好地总结了它。

您可以在堆叠上下文here

中找到关于z-index属性如何工作的好文章

Answer 2

是/否如果父元素设置为相对位置，它将仅影响同一组内的事物。从那一点开始，其中的一切都将基于此。

从我看到的基于你的上面的HTML然而。 z-index没有任何值，因为元素在说话时不会脱离DOM流。 z-index适用于具有位置：固定或绝对

的元素

示例：

<div style="z-index:100;"></div>

什么都不做

<div>
<div style="z-index:100;"></div>
</div>

什么都不做

<div style="position:relative;width:100px;height:100px;">
   <div style="z-index:100;position:absolute;top:0;left:0;background-color:#000;"></div>
   <div style="z-index:200;position:absolute;top:25px;left:25px;background-color:#CCC;"></div>
</div>

执行某些操作并将元素保留在父div中。

<div style="width:100px;height:100px;">
   <div style="z-index:100;position:absolute;top:0;left:0;background-color:#000;"></div>
   <div style="z-index:200;position:absolute;top:25px;left:25px;background-color:#CCC;"></div>
</div>

做了一些事情，但是带有z-index的div将使用浏览器作为确定自己放置位置的媒介，而不是父元素。

Answer 3

正如克里斯已经指出的那样，z-index属性仅适用于定位元素是很重要的。 The spec表示z-index属性定义了相同堆叠上下文中元素的位置。并非每个元素都会生成新的堆叠上下文！因此，z-index不仅与DOM树中的兄弟姐妹相关，而且与同一堆叠上下文中的每个元素相关。 The spec表示auto属性的z-index而不是整数的元素不会生成新的堆叠上下文。