为什么z-index不起作用？

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

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

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

要么

z-index:100 // on the div above

也不起作用。诸如此类的组合也没有。怎么会？

该z-index属性仅适用于元素具有position比其他值static（例如position: absolute;，position: relative;或position: fixed）。

position: sticky;Firefox中还支持该功能，Safari中有该功能的前缀，在旧版本的Chrome中以自定义标志起作用了一段时间，并且Microsoft正在考虑将其添加到其Edge浏览器中。

重要提示：
对于常规定位，请确保position: relative在您还设置的元素上包括z-index。否则，它将不会生效。

如果您将position设置为其他值，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上堆叠上下文

您的元素需要具有一个position属性。（例如absolute，relative，fixed）或z-index将无法正常工作。

在许多情况下，必须为 z-index工作。

确实，申请 position: relative到问题中的元素可能会解决问题（但是没有提供足够的代码来确定）。

其实position: fixed，position: absolute并且position: sticky还将使z-index，但这些值也改变了布局。用position: relative布局不被破坏。

本质上，只要元素不在position: static（默认设置），它就被认为已定位并且z-index可以使用。

关于“为什么z-index不起作用？”的许多答案。问题断言z-index 只有适用于定位的元素。从CSS3开始，这不再是事实。

弹性项目或网格项目的元素z-index即使在positionis 时也可以使用static。

从规格：

4.3。弹性项目Z排序

Flex项的绘制与内联块完全相同，不同之处在于，使用经顺序修改的文档顺序代替原始文档顺序，以及创建堆叠上下文z-index以外的其他值（auto即使position是）static。

5.4。Z轴订购：z-index属性

网格项目的绘制顺序与内联块完全相同，不同之处在于，使用顺序修改后的文档顺序代替原始文档顺序，并且z-index值是auto创建堆叠上下文（即使 positionis）以外的值static。

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