Html 为什么z索引只适用于定位元素？

我知道z-index只适用于定位元素，但我想知道为什么会出现这种情况。这种行为有什么好的理由吗？或者它只是那些半武断的规范决定之一

我在使用这样的代码时遇到了这个问题：

HTML

您会注意到，这是根据规范工作的（尽管

.not positioned

的z索引值较高，但

.not positioned

图像仍位于

.positioned

图像的后面），但我很难理解这种行为的基本原理

---

谢谢。

元素在所有3个维度中都定位

• 在x轴上使用

  左

  和

  右

• 在y轴上使用

  顶部

  和

  底部

• 在z轴上使用

  z索引

当然，

z-index

与其他索引并非100%相似，因为它只描述堆叠而不是“真实”位置，但这就是在z轴上所能做的，因为在该轴上没有固定的边界

因此，如果要设置元素的

z索引

，则需要为元素指定一个

位置

值，而不是

静态

。如果你的问题像你的例子一样简单，你也可以给另一个元素一个负数

z-index

.positioned {
    position: relative;
    left: -60px;
    z-index: -1;
}

来自Mozzilla-

position CSS属性为定位选择其他规则 元素，设计用于脚本动画效果

因此，为了更改元素的位置，您需要告诉它不要是静态的，并通过应用position属性来做到这一点

进一步阅读：

---

简单的谷歌搜索感谢您的解释以及将z-index设置为-1的替代方法。

img {
    border: 2px solid black;
}

.positioned {
    position: relative;
    left: -60px;
    z-index: 1;
}

.not-positioned {
    z-index: 99;
}

.positioned {
    position: relative;
    left: -60px;
    z-index: -1;
}