为什么z-index不起作用？

所以，如果我正确理解z-index ，那么在这种情况下是完美的：

我想把底部的图像（标签/卡）放在它上面的div下面。 所以你不能看到锋利的边缘。 我如何做到这一点？

 z-index:-1 // on the image tag/card 

要么

 z-index:100 // on the div above 

也不起作用。 也不是这样的任何组合。 怎么来的？

Answer 1

z-index属性仅对position值不是static元素（例如position: absolute; ， position: relative;或position: fixed ）起作用。

也有position: sticky; （在Firefox中受支持）以Safari为前缀，在旧版Chrome中按照自定义标志工作一段时间，Microsoft正在考虑将其添加到其Edge浏览器。

Answer 2

你的元素需要有一个位置属性。 （例如绝对的，相对的，固定的）或z-索引不起作用

Answer 3

在很多情况下，一个元素必须被定位为z-index才能工作。

事实上，应用position: relative对于问题中的元素可能会解决问题（但没有足够的代码提供知道肯定）。

实际上， position: fixed ， position: absolute和position: sticky也会启用z-index ，但是这些值也会改变布局。 有position: relative布局不受干扰。

本质上，只要元素不是position: static （默认设置），它就被认为是定位的， z-index将起作用。

---

很多答案都是“为什么z-index不工作？” 问题断言z-index 只适用于定位的元素。 从CSS3开始，这不再是事实。

即使position是static ， Flex项目或网格项目的元素也可以使用z-index 。

从规格：

4.3。 Flex Item Z-Ordering

除了用顺序修改的文档顺序代替原始文档顺序之外，Flex项目的绘制与内嵌块完全相同，即使position是static ， z-index值也不是auto创build堆栈上下文。

5.4。 Z轴sorting： z-index属性

网格项目的绘制顺序与内嵌块完全相同，不同之处在于，使用顺序修改的文档顺序代替原始文档顺序，即使position是static ， z-index值也不是auto创build堆栈上下文。

这是一个z-index在非定位flex项目上的演示： https : //jsfiddle.net/m0wddwxs/

Answer 4

如果您将位置设置为除static之外的其他值，但您的元素的z-index仍然不起作用，则可能是某个父元素具有z-index集。

堆叠上下文具有层次结构，并且每个堆叠上下文在父容器堆叠上下文的堆叠顺序中被考虑。

所以以下的HTML

 div { border: 2px solid #000; width: 100px; height: 30px; margin: 10px; position: relative; background-color: #FFF; } #el3 { background-color: #F0F; width: 100px; height: 60px; top: -50px; } 

 <div id="el1" style="z-index: 5"></div> <div id="el2" style="z-index: 3"> <div id="el3" style="z-index: 8"></div> </div>