为啥 z-index 不起作用？

Posted 2023-05-08

【中文标题】为啥 z-index 不起作用？

【英文标题】：Why does z-index not work?为什么 z-index 不起作用？

【发布时间】：2012-02-29 19:10:03

【问题描述】：

所以如果我正确理解z-index，在这种情况下会很完美：

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

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

或

z-index:100 // on the div above

也不行。这样的组合也没有。怎么会？

【问题讨论】：

有时我们会错误地将static以外的位置值仅应用于一个元素。我们应该确保将 position 属性应用于基于 z-index 堆叠的所有元素，否则它不起作用。

【参考方案1】：

z-index 属性仅适用于具有position 值而不是static 的元素（例如position: absolute;、position: relative; 或position: fixed）。

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

【讨论】：

It is also depending on other factors to create Stacking Context.

添加到这个答案中，chrome 和撰写本文时可能的其他浏览器要求您明确声明 position: relative 以使 z-index 工作，尽管默认情况下元素以其他相对方式表现

static 元素是静态，不能在x, y or z planes 中移动。他们不能像我们与position: absolute 一起工作时那样搬入x plane (left or right) 或y plane (top or bottom)。而且他们也不能在z plane i.e. with z-index中移动。

您知道在网格元素中使用z-index 的任何问题吗？？

sticky 现在被所有现代浏览器支持：caniuse.com/css-sticky

【参考方案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));

There is a great article about stacking contexts on MDN

【讨论】：

如何解决这个问题？

设置正确的父元素的z-index。

请注意：当您的父元素具有 position: sticky 并且它没有 z-index 时，您为其子元素设置的任何 z-index 都将不起作用，您必须设置一些 z - 父元素的索引，也许它适用于所有位置类型：sticky, relative, absolute 等，但在我的情况下是sticky。

【参考方案3】：

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

【参考方案4】：

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

确实，将position: relative 应用于问题中的元素可能会解决问题（但没有提供足够的代码来确定）。

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

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

---

“为什么 z-index 不起作用？” 问题的许多答案断言 z-index仅 对定位元素起作用。从 CSS3 开始，这不再适用。

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

来自规格：

4.3. Flex Item Z-Ordering

Flex 项目的绘制与内联块完全相同，只是使用 order-modified 文档 order 代替 raw 文档顺序和z-index 以外的auto 值创建一个堆叠上下文，即使position 是static。

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

grid item的绘制顺序和inline blocks完全一样，只是order-modified document order是 用于代替原始文档顺序，并且 z-index 以外的 auto 值创建一个堆叠上下文，即使 position 是 static。

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

【讨论】：

"即使位置是静态的，作为弹性项目或网格项目的元素也可以使用 z-index。"是的，由于这些布局方法的动态特性，规范基本上说对待 position: static 与对待 position: relative 的弹性和网格项目完全相同。所以我可能会说，并不是 CSS3 中不再需要定位元素，而是 CSS3 将 flex 和 grid 项目视为已定位，无论如何。不过，可能只有两种看待同一事物的方式。

@TylerH 我们应该注意规范的那部分，因为我们应该仅在处理 z-index 而不是一般情况下将静态视为相对。例如，除非您明确指定 position:relative，否则您不能使用左/上/下/右移动弹性项目。具有绝对位置的弹性项目的后代不会将弹性项目视为它们的包含块，因为弹性项目没有定位。 (jsfiddle.net/0yo7utfL/2)

我在 css 中发现了一个奇怪的“错误”。出于某种原因overflow-y: scroll 阻止overflow-x: visible 工作...can you please take a look?

【参考方案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 高于内容，尽管内容将出现在模态框的顶部，因为“content”是具有 z-index 属性的父级.

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

【参考方案6】：

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