为什么z索引不起作用？

Question

为什么z索引不起作用？所以如果我理解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中用自定义标志工作了一段时间，微软正在考虑将其添加到自己的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>

不管有多大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上的堆叠上下文的很棒的文章。