为什么 z-index 不起作用? [英] Why does z-index not work?

问题描述

因此，如果我正确理解 z-index，那么在这种情况下就完美了:

So if I understand z-index correctly, it would be perfect in this situation:

我想将底部图像(标签/卡片)放在其上方的 div 下方.所以你看不到锋利的边缘.我该怎么做?

I want to place the bottom image (the tag/card) below the div above it. So you can't see the sharp edges. How do I do this?

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

或

z-index:100 // on the div above

也不行.像这样的组合也不会.怎么来的?

doesn't work either. Neither does a combination of anything like this. How come?

推荐答案

z-index 属性仅适用于具有 position 不是 static 的值(例如 position: absolute;, position:relative;, 或 position: fixed).

The z-index property only works on elements with a position value other than static (e.g. position: absolute;, position: relative;, or position: fixed).

还有 position:sticky; 在 Firefox 中受支持，在 Safari 中带有前缀，在旧版本的 Chrome 中在自定义标志下工作了一段时间，微软正在考虑添加到他们的 Edge 浏览器.

There is also position: sticky; that is supported in Firefox, is prefixed in Safari, worked for a time in older versions of Chrome under a custom flag, and is under consideration by Microsoft to add to their Edge browser.

这篇关于为什么 z-index 不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！