z-index是否仅影响同一分组内的项目？

我试图把东西放在我的HTML位于不同的区域，但有一个高Z指数，所以它应该是在顶部。这是如何运作的？z-index是否仅影响同一分组内的项目？

我的例子是这样的：

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

我在想，Z-指数仅为relavent在你的DOM树的兄弟姐妹。

大家都在想这个吗？

来源

2012-08-15 Fallenreaper

这张图片很好地概括了它。

image taken from the article linked below

你可以找到在z-index属性是如何工作的堆叠内容here

来源

2012-08-15 15:27:16 effectica

图像有帮助。谢谢 – Fallenreaper 2012-08-15 15:40:20

是/否如果父元素设置为相对位置，它将只影响同一组内的事物。从这个角度来看，它内部的一切都将以此为基础。

从我看到基于您的上述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 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>

做一些事情，但的div用z-index将使用浏览器作为确定在何处放置自己，而不是上级元素的存在中。

来源

2012-08-15 15:18:34 chris

我要在一秒钟内发布你的小提琴，看看我做了什么错误，因为我似乎做得很对。 – Fallenreaper 2012-08-15 15:41:41

内的好文章克里斯已经指出的那样，重要的是z-index属性只适用于定位的元素。 The spec表示z-index属性定义了在相同的堆叠环境内的元素定位。并非每个元素都会生成新的堆叠上下文！因此，z-index不仅与DOM树中的同胞相关，而且与同一堆栈上下文中的每个元素都相关。 The spec表示具有auto而不是z-index属性的整数而不是的元素生成新的堆叠上下文。

来源

2012-08-15 15:29:16

z-index是否仅影响同一分组内的项目？

回答

相关问题