Z-索引不影响元素的显示顺序。

Question

我不能把我的头转到z指数的概念上。由于某种原因，灰色盒子出现在最下面。然后是黑匣子，上面是红色的盒子。应该正好相反。寻求任何帮助！

HTML：

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

CSS：

#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;
}

Answer 1

首先，您丢失了一个关闭斜杠的黑匣子关闭div，这是抛出DOM。

第二，灰色框是另外两个div的父函数，所以它总是在它们下面，除非你把子div完全从流中取出来，并给它们一个负的z指数。例如，我给黑色和红色框一个position:absolute，并将灰色框更改为默认的position: static，因此红色和黑匣子不再被视为灰盒的子框：

​

#gray-box {
  position: static;
  background-color: gray;
  width: 100%;
  height: 4rem;
}

#black-box {
  z-index: -1;
  background-color: black;
  width: 20rem;
  height: 4rem;
  position: absolute;
  top: 20px; left: 20px
}

#red-box {
  z-index: -2;
  background-color: red;
  width: 20rem;
  height: 4rem;
  position: absolute;
  top: 30px; left: 30px;
}

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

​

Answer 2

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

How to make child element higher z-index than parent?

Answer 3

我认为问题是你有一个还没有关闭的部门。这里：<div id="block-box"><div>，在结束的div标记中有一个错误的/。

这是一个有用的版本，如果这是你要找的。https://codepen.io/norbertbiro/pen/pozxpQP