为什么z-index不起作用？

Question

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

我想将底部图像（标签/卡片）放在它上面的div下面。所以你看不到锋利的边缘。我该怎么做？

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

或

z-index:100 // on the div above

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

Answer 1

z-index属性仅适用于static以外的position值的元素（例如position: absolute;，position: relative;或position: fixed）

Firefox中还支持position: sticky;，在Safari中加上前缀，在自定义标记下的旧版Chrome中工作了一段时间，Microsoft正在考虑将其添加到其Edge浏览器中。< / p>

Answer 2

如果您将位置设置为除static之外的其他值，但您的元素z-index似乎仍然无法正常工作，则可能是某个父元素具有{{1} } set。

堆叠上下文具有层次结构，并且每个堆叠上下文都以父级堆叠上下文的堆叠顺序来考虑。

所以使用以下html

＆＃13;

＆＃13;

z-index

＆＃13;

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; }

＆＃13;

＆＃13;

＆＃13;

无论<div id="el1" style="z-index: 5"></div> <div id="el2" style="z-index: 3"> <div id="el3" style="z-index: 8"></div> </div> z-index的设置有多大，它都会在el3下，因为它的父级具有较低的堆叠上下文。您可以将堆叠顺序设想为el1的堆叠顺序实际上 3.8 低于 5 的级别。

如果要检查父元素的堆叠上下文，可以使用：

el3

There is a great article about stacking contexts on MDN

Answer 3

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

Answer 4

在许多情况下，必须定位一个元素才能使z-index起作用。

事实上，将position: relative应用于问题中的元素可能会解决问题（但提供的代码不足以确定）。

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

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

＆＃34;为什么z-index不起作用的许多答案？＆＃34; 问题断言只有z-index 的工作原理定位元素。从CSS3开始，这已不再适用。

即使z-index为position，flex items或grid items元素也可以使用static。

来自规格：

  

4.3. Flex Item Z-Ordering

     

Flex项目绘制与内联块完全相同，除了使用订单修改的文档顺序代替raw   文档顺序以及z-index以外的auto值即使position为static也会创建堆叠上下文。

     

5.4. Z-axis Ordering: the z-index property

     

网格项的绘制顺序与内联块完全相同，但订单修改的文档顺序除外   用于代替原始文档订单，z-index以外的auto值创建堆叠上下文，即使   position是static。

此处演示了z-index处理非定位弹性项目：https://jsfiddle.net/m0wddwxs/

Answer 5

请确保您要使用z-index控制的元素没有具有z-index属性的父对象，因为该元素位于较低的堆叠上下文中由于其父级的z-index级别。

这是一个例子：

mov DWORD PTR [rsp + 4], 2

在上面的示例中，模态具有比内容更高的z-index，尽管内容将出现在模态顶部，因为“ content ”是具有z-index属性的父级

这是一篇文章，解释z-index可能不起作用的4个原因： https://coder-coder.com/z-index-isnt-working/