html - 为什么 z-index 不起作用？

Question

所以如果我正确理解z-index，在这种情况下就完美了:

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

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

或

z-index:100 // on the div above

也不行。像这样的组合也没有。怎么会？

Answer 1

z-index属性仅适用于带有 position 的元素static 以外的值(例如 position: absolute;、position: relative; 或 position: fixed)。

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