为什么 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 ）。

还有position: sticky; 它在 Firefox 中受支持，在 Safari 中具有前缀，在旧版本的 Chrome 中以自定义标志工作了一段时间，并且微软正在考虑将其添加到他们的 Edge 浏览器中。

Answer 2

如果您将位置设置为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>

无论el3的z-index设置多大，它总是在el1之下，因为它的父级具有较低的堆叠上下文。 您可以将堆叠顺序想象为el3的堆叠顺序实际上是3.8的级别，低于5 。

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

var el = document.getElementById("#yourElement"); // or use $0 in chrome;
do {
    var styles = window.getComputedStyle(el);
    console.log(styles.zIndex, el);
} while(el.parentElement && (el = el.parentElement));

MDN 上有一篇关于堆叠上下文的好文章

Answer 3

您的元素需要有一个position属性。 （例如absolute 、 relative 、 fixed ）或z-index将不起作用。

Answer 4

在许多情况下，必须定位元素才能使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 ，作为弹性项目或网格项目的元素也可以使用z-index 。

从规格：

4.3. 弹性项目 Z 排序

Flex 项目的绘制与内联块完全相同，除了使用 order-modified 文档 order 代替原始文档 order，以及auto以外的z-index值即使position是static也会创建堆叠上下文。

5.4. Z 轴排序： z-index属性

网格项目的绘制顺序与内联块完全相同，除了使用 order-modified 文档 order 代替原始文档 order，以及auto以外的z-index值即使position为static也会创建堆叠上下文。

这是z-index在非定位弹性项目上工作的演示： https ://jsfiddle.net/m0wddwxs/

Answer 5

确保您想使用 z-index 控制的这个元素没有具有z-index 属性的父元素，因为元素由于其父元素的 z-index 级别而处于较低的堆叠上下文中。

这是一个例子：

<section class="content">            
    <div class="modal"></div>
</section>

<div class="side-tab"></div>

// CSS //
.content {
    position: relative;
    z-index: 1;
}

.modal {
    position: fixed;
    z-index: 100;
}

.side-tab {
    position: fixed;
    z-index: 5;
}

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

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

Answer 6

Z-index 需要这些才能工作：

1. 位置：相对、绝对、固定、..
2. 确保父元素没有overflow: hidden;

Answer 7

除了设置位置，您还应该了解 Stacking 上下文。 有关更多详细信息，请参阅此答案。

Answer 8

我对 z-index 也有同样的问题，不管你信不信，它只是通过设置背景颜色来解决的

像这样

背景颜色：白色；

Answer 9

如果一切都失败了，请在 HTML 中查找语法错误。 这不直观，但我已经看到这是z-index不起作用的原因。

以下代码具有无效的 HTML 语法：

<div class="over"/>
<div class="under"/>

...（这是无效的语法，因为 div 不是自结束标记）。

CSS 属性应用于这些流氓 HTML 元素，例如background-color: black , position: fixed , width: 150px 1501px all working as expected, and top:150px 但是， z-index: 2属性在完全相同的条件下不工作。

只有当无效的 HTML 被修复时， z-index才能正常工作。

我不确定为什么z-index比其他 CSS 属性更挑剔，但也许这个答案可以帮助某人。

Answer 10

在我的情况下，我的导航栏的不透明度为 0.9，我从 codercoder.com 得到了答案，因为我从导航栏的 css 中删除了 opacity 属性，z-index 有效

Answer 11

只需给 position 其他的 static。你应该给两个容器一个 position 才行。