如何将Z-index设置为嵌套元素？

Question

我有两个基本DOM元素和两个内部元素。

• 蓝框必须与灰色框重叠。
• 蓝色内盒必须与蓝色和灰色框重叠。
• 灰色内框必须与所有其他元素重叠。

但事实并非如此。

#grey_box {
  width: 200px;
  height: 200px;
  border: solid 1px #ccc;
  background: #ddd;
  position: relative;
  z-index: 10;
}
#blue_box {
  width: 200px;
  height: 200px;
  border: solid 1px #4a7497;
  background: #8daac3;
  position: relative;
  z-index: 20;
  margin-left: 80px;
  margin-top: -50px;
}
#grey_inner_box {
  width: 50px;
  height: 50px;
  background: red;
  position: relative;
  z-index: 200;
  margin-top: 80px;
  margin-left: 150px;
}
#blue_inner_box {
  width: 50px;
  height: 50px;
  background: green;
  position: relative;
  z-index: 100;
  margin-left: 40px;
  margin-top: -40px;
}

<div id="grey_box">
  <div id="grey_inner_box">grey inner</div>
</div>
<div id="blue_box">
  <div id="blue_inner_box">blue inner</div>
</div>

我做错了什么？

Answer 1

你想要什么是不可能的。

将元素设置为position: 除静态之外的任何内容时，它会建立新的堆叠上下文。

你在其中设置z-index的任何内容都只位于其中。

以此为例：

<div id="box1">
    <div id="paper1"></div>
    <div id="paper2"></div>
    <div id="paper3"></div>
</div>

<div id="box2">
    <div id="paper4"></div>
    <div id="paper5"></div>
    <div id="paper6"></div>
</div>

在每个盒子里面，您可以按自己喜欢的顺序放置纸张。你可以将box1放在box2的顶部，反之亦然，但是当你移动一个盒子时，你可以随身携带它里面的文件。

如果您想在不同的方框中重叠纸张，您需要先将它们从包装盒中取出。

Answer 2

从z-index移除#grey_box。由于#grey_box位于所有其他div之下，因此我们不需要z-index。这有助于将#grey_inner_box置于顶部。

＆＃13;

＆＃13;

#grey_box {
  width: 200px;
  height: 200px;
  border: solid 1px #ccc;
  background: #ddd;
  position: relative;
  /* z-index: 10; */
}
#blue_box {
  width: 200px;
  height: 200px;
  border: solid 1px #4a7497;
  background: #8daac3;
  position: relative;
  z-index: 20;
  margin-left: 80px;
  margin-top: -50px;
}
#grey_inner_box {
  width: 50px;
  height: 50px;
  background: red;
  position: relative;
  z-index: 200;
  margin-top: 110px;
  margin-left: 150px;
}
#blue_inner_box {
  width: 50px;
  height: 50px;
  background: green;
  position: relative;
  z-index: 100;
  margin-left: 40px;
  margin-top: -40px;
}

＆＃13;

<div id="grey_box">
  <div id="grey_inner_box">grey inner</div>
</div>
<div id="blue_box">
  <div id="blue_inner_box">blue inner</div>
</div>

＆＃13;

＆＃13;

＆＃13;