为什么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准备好了。堆叠上下文具有层次结构，并且每个堆叠上下文都按父层堆叠上下文的堆叠顺序来考虑。因此，对于下面的htmldiv { 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">&nbsp; <div id="el3" style="z-index: 8"></div></div>不管有多大z-index的el3将被设置，它将永远在el1因为它的父级具有较低的堆叠上下文。你可以把堆叠顺序想象成el3实际上3.8低于5.如果要检查父元素的堆叠上下文，可以使用以下方法：var&nbsp;el&nbsp;=&nbsp;document.getElementById("#yourElement");&nbsp;//&nbsp;or&nbsp;use&nbsp;$0&nbsp;in&nbsp;chrome;do&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;styles&nbsp;=&nbsp;window.getComputedStyle(el); &nbsp;&nbsp;&nbsp;&nbsp;console.log(styles.zIndex,&nbsp;el);}&nbsp;while(el.parentElement&nbsp;&&&nbsp;(el&nbsp;=&nbsp;el.parentElement));有一篇关于mdn上的堆叠上下文的很棒的文章。