所以如果我正确理解z-index，它在这种情况下是完美的:
我想把底部图像(标签/卡片)下面的div上面。所以你看不到锋利的边缘。我怎么做呢?
z-index:-1 // on the image tag/card
or
z-index:100 // on the div above
也不管用。像这样的组合也不行。如何来吗?
当前回答
确保您想要使用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指数比内容高，尽管内容会出现在模态的顶部，因为“content”是具有z-index属性的父元素。
这里有一篇文章解释了z-index可能不起作用的4个原因: https://coder-coder.com/z-index-isnt-working/
其他回答
z-index属性只适用于具有非静态位置值的元素(例如，position: absolute;， position: relative;，或position: fixed)。
还有位置:粘;它在Firefox中得到支持，在Safari中有前缀，在较旧版本的Chrome中使用了自定义标记，微软正在考虑将其添加到Edge浏览器中。
你的元素需要有一个position属性。(例如绝对指数、相对指数、固定指数)或z指数都不起作用。
我在z指数上也遇到过同样的问题 不管你信不信，只要设置背景色就能解决问题
像这样
背景颜色:白色;
只要给出其他静态的位置。你应该给两个容器一个位置，这样就可以了。
如果所有这些都失败了，请在HTML中查找语法错误。这不是直观的，但我看到它是z指数不起作用的原因。
下面的代码有无效的HTML语法:
<div class="over"/>
<div class="under"/>
.．.(这是无效的语法，因为div不是一个自关闭标签)。
应用于这些流氓HTML元素的CSS属性，如background-color: black、position: fixed、width: 150px和top:150px，都能正常工作。然而，z-index: 2属性在完全相同的条件下并不适用。
只有当无效的HTML被修复时，z-index才能正常工作。
我不确定为什么z-index比其他CSS属性更挑剔，但也许这个答案可以帮助到一些人。
