如何为嵌套元素设置 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

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

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

<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>

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

How to set Z-index to nested elements?

css

z-index