Html z索引不影响元素的显示顺序

我无法理解z-index的概念。出于某种原因，灰色框出现在最底部。然后是黑盒子，上面是红盒子。恰恰相反。 谢谢你的帮助

HTML:

---

我认为问题是你有一个部门还没有结束。 此处：

结束div标记中有一个错误

---

这是一个工作版本，如果这是你要找的

您在“黑盒”元素上的结束

不正确。确保使用正斜杠关闭。首先，您的黑盒结束div缺少一个结束斜杠，这会导致DOM关闭

其次，灰色框是其他两个div的父级，因此它总是在它们下面，除非您将子div完全从流中取出，并给它们一个负z索引。例如，我为黑色和红色框指定了一个

位置：绝对

，并将灰色框更改为默认的

位置：静态

，因此红色和黑色框不再被视为灰色框的子框：

#灰色框{
位置：静态；
背景颜色：灰色；
宽度：100%；
身高：4rem；
}
#黑匣子{
z指数：-1；
背景色：黑色；
宽度：20雷姆；
身高：4rem；
位置：绝对位置；
顶部：20px；左侧：20px
}
#红盒子{
z指数：-2；
背景色：红色；
宽度：20雷姆；
身高：4rem；
位置：绝对位置；
顶部：30px；左侧：30px；
}

---

读了这篇文章，我想它会澄清你的误解。它解释了父元素的z索引与子元素无关。我认为这就是你试图通过设置父母的z指数高于孩子的z指数来实现的

---

你想实现什么？@ProGamingTvG还有一个问题，请参阅我的答案以了解更多信息。符号链接是正确的@ProGamingTvG应该阅读他关于z-index的评论。这是正确的答案，应该标记为接受，因为这个答案只正确地提到了z-index供您解释！现在它更有意义了；）

<div id="gray-box">
  <div id="black-box"><div>
  <div id="red-box"></div>
</div>

#gray-box {
  position: relative;
  z-index: 2;
  background-color: gray;
  width: 100%;
  height: 4rem;
}

#black-box {
  position: relative;
  z-index: 1;
  background-color: black;
  width: 20rem;
  height: 4rem;
}

#red-box {
  position: relative;
  z-index: 0;
  background-color: red;
  width: 20rem;
  height: 4rem;
}