为什么 z-index 不起作用？

Question

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

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

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

或者

z-index:100 // on the div above

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

原文由 Linkjuice57 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

The z-index property only works on elements with a position value other than static (eg position: absolute; , position: relative; ,或 position: fixed ）。

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

原文由 Evert 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

无论 z-index 的 el3 将设置多大，它总是在 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 上有一篇关于堆叠上下文的很棒的文章

原文由 Buksy 发布，翻译遵循 CC BY-SA 3.0 许可协议