如何实现一个div重叠到另一个div上方？

Question

我应该如何实现

重叠，以使

#inner-block

在前景中呈现？

#block-1 {
  position: absolute;
  width: 200px;
  height: 200px;
  top: 10px;
  left: 10px;
  background-color: #999;
  z-index: 1;
}

#inner-block {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 20px;
  background-color: #777;
  z-index: 100;
}

#block-2 {
  position: absolute;
  width: 200px;
  height: 200px;
  top: 60px;
  left: 60px;
  background-color: #666;
  z-index: 2;
}

<div id="block-1">
  <div id="inner-block"></div>
</div>
<div id="block-2"></div>

- Mano World

---

我不明白你的问题。你所说的“在前景中”是什么意思？是指小块在大块上面吗？ - Adrian Pop

我认为在当前的设置中这是不可能的，因为#inner-block的父元素的z-index比#block-2低。这些元素可以移动吗？ - Carl Binalla

一个简单的解决方案就是将内部块移动为块2的子元素。 - Adrian Pop

Answer 1

一个简单的解决方案是将你的HTML更新为以下内容：

<div id="block-1">
  <div id="inner-block"></div></div>
  <div id="block-2">
</div>

这个方法的有效性在于它保证了block-2和inner-block的顺序是相对于共同的父元素block-1而言的。

#block-1
{
  position: absolute;
  width: 200px;
  height: 200px;
  top: 10px;
  left: 10px;
  background-color: #999;
  z-index: 1;
}
#inner-block
{
  position: relative;
  width: 100px;
  height: 100px;
  margin: 20px;
  background-color: #777;
  z-index: 100;
}
#block-2
{
  position: absolute;
  width: 200px;
  height: 200px;
  top: 60px;
  left: 60px;
  background-color: #666;
  z-index: 2;
}

<div id="block-1">
  <div id="inner-block"></div>
  <div id="block-2"></div>
</div>

希望这可以帮到你！

- Dacre Denny

Answer 2

只需从#bloc-1中删除z-index。这将使.inner-block属于与#bloc-1相同的堆叠上下文，而不是由#bloc-1创建的堆叠上下文。

对于那些具有“z-index：auto”的元素，请将该元素视为创建新的堆叠上下文，但任何定位后代和实际创建新堆叠上下文的后代应被视为父堆叠上下文的一部分，而不是此新堆叠上下文的一部分。^ref

这意味着3个div将属于同一个堆叠上下文，因此我们可以按任意顺序排列。

#block-1 {
  position: absolute;
  width: 200px;
  height: 200px;
  top: 10px;
  left: 10px;
  background-color: #999;
}

#inner-block {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 20px;
  background-color: #777;
  z-index: 100;
}

#block-2 {
  position: absolute;
  width: 200px;
  height: 200px;
  top: 60px;
  left: 60px;
  background-color: #666;
  z-index: 2;
}

<div id="block-1">
  <div id="inner-block"></div>
</div>
<div id="block-2"></div>

- Temani Afif