所以如果我正确理解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控制的元素没有具有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指数上也遇到过同样的问题 不管你信不信,只要设置背景色就能解决问题

像这样

背景颜色:白色;