将 div 堆叠在另一个 div 上

在 HTML 中，我们可以使用 div 元素来创建不同的布局并实现不同的效果。有时我们需要将一个 div 元素放置在另一个 div 元素的上方，这就需要将 div 堆叠在另一个 div 上。

HTML

首先在 HTML 中创建两个 div 元素，一个作为主容器（container），另一个作为子容器（child）。

<div class="container">
  <div class="child"></div>
</div>

CSS

设置子容器的宽度和高度，并设置 position 属性为 absolute。接着，设置 top 和 left 属性为 0，这将把子容器放在主容器的左上角。

.child {
  position: absolute;
  width: 200px;
  height: 200px;
  top: 0;
  left: 0;
}

现在，子容器已经被放置在主容器的左上角，但是子容器可能会被主容器覆盖。我们可以使用 z-index 属性来解决这个问题。

.container {
  position: relative;
  width: 200px;
  height: 200px;
}

.child {
  position: absolute;
  width: 200px;
  height: 200px;
  top: 0;
  left: 0;
  z-index: 1;
}

在主容器中添加 position: relative 属性，这使得子容器的 z-index 属性可以生效。设置子容器的 z-index 属性为 1，这将使子容器在其他元素之上显示。

完整代码

<div class="container">
  <div class="child"></div>
</div>

.container {
  position: relative;
  width: 200px;
  height: 200px;
}

.child {
  position: absolute;
  width: 200px;
  height: 200px;
  top: 0;
  left: 0;
  z-index: 1;
}

这是一个简单的将 div 堆叠在另一个 div 上的示例。通过设置 position 属性，调整位置，并使用 z-index 控制显示顺序，可以实现更丰富的布局效果。