2

我试图在我的 html 中放置一些位于不同区域但具有高 z-index 的内容，因此它应该位于顶部。这是如何运作的？

我的例子是这样的：

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

我在想 z-index 只与 DOM 树中的兄弟姐妹相关。

大家对此怎么看？

4

3 回答 3

5

这张图很好地总结了它。

图片取自下面链接的文章

您可以在此处找到一篇关于 z-index 属性如何在堆叠上下文中工作的好文章

于 2012-08-15T15:27:16.663 回答
1

是/否，如果父元素设置为相对位置，它只会影响同一组内的事物。从那时起，它里面的所有东西都将以此为基础。

但是，根据我根据您上面的 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 将使用浏览器作为确定将自己放置在哪里的媒介，而不是父元素。

于 2012-08-15T15:18:34.033 回答
1

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

于 2012-08-15T15:29:16.263 回答