所以如果我正确理解z-index，它在这种情况下是完美的:
我想把底部图像(标签/卡片)下面的div上面。所以你看不到锋利的边缘。我怎么做呢?
z-index:-1 // on the image tag/card
or
z-index:100 // on the div above
也不管用。像这样的组合也不行。如何来吗?
当前回答
如果你将position设置为其他值而不是static，但元素的z-index仍然不起作用，这可能是某些父元素设置了z-index。
堆叠上下文具有层次结构，每个堆叠上下文都按照父堆栈上下文的堆叠顺序考虑。
下面是html
Div{边界:2px固体#000;宽度:100 px;高度:30 px;保证金:10 px;位置:相对;background - color: # FFF;｝ #el3 {background-color: #F0F;宽度:100 px;高度:60 px;前:-50像素;｝ <div id="el1" style="z-index: 5"></div> . <div id="el2" style="z-index: 3"> <div id="el3" style="z-index: 8"></div> . < / div >
不管el3的z指数有多大，它总是在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上叠加上下文的很棒的文章
其他回答
z指数需要这些来工作:
位置:相对，绝对，固定，.. 确保父元素没有溢出:hidden;
在我的例子中，我有我的导航栏的不透明度为0.9，我从codercoder.com得到了我的答案，因为我从我的导航栏的css中删除了不透明度属性，z-index工作
确保您想要使用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/
如果你将position设置为其他值而不是static，但元素的z-index仍然不起作用，这可能是某些父元素设置了z-index。
堆叠上下文具有层次结构，每个堆叠上下文都按照父堆栈上下文的堆叠顺序考虑。
下面是html
Div{边界:2px固体#000;宽度:100 px;高度:30 px;保证金:10 px;位置:相对;background - color: # FFF;｝ #el3 {background-color: #F0F;宽度:100 px;高度:60 px;前:-50像素;｝ <div id="el1" style="z-index: 5"></div> . <div id="el2" style="z-index: 3"> <div id="el3" style="z-index: 8"></div> . < / div >
不管el3的z指数有多大，它总是在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上叠加上下文的很棒的文章
只要给出其他静态的位置。你应该给两个容器一个位置，这样就可以了。
