如何用CSS实现两个子div在父div中重叠并居中？

风之吻网站开发 2025-03-09 172

如何使用CSS在一个父级div中实现两个子div的重叠和居中？本文将详细讲解如何在一个父div中，使两个大小不同的子div相互重叠，并同时在父div内水平和垂直居中。 “重叠”指的是一个子div覆盖另一个子div。我们将使用CSS定位属性实现此效果，确保子div不会超出父div边界，且父div外观不受影响。

如何用CSS实现两个子div在父div中重叠并居中？-第1张图片-风享汇

关键在于巧妙运用CSS定位。首先，父级div需要设置position: relative，为绝对定位的子div提供参考坐标。然后，两个子div都需设置position: absolute; left: 0; top: 0; right: 0; bottom: 0; 这使得子div能同时占据父div的四个角，并通过margin: auto;实现水平和垂直居中。

较大的子div作为底层背景，较小的子div叠加在其上。通过设置不同的宽高和背景颜色，即可区分这两个div。为了使父div在页面居中，可以添加margin: 100px auto;。以下为代码示例：

<div class="box">
  <div class="inner1"></div>
  <div class="inner2"></div>
</div>

.box {
  width: 500px;
  height: 500px;
  border: 5px solid red;
  margin: 100px auto;
  position: relative;
}

.inner1,
.inner2 {
  width: 200px;
  height: 200px;
  background: blue;
  margin: auto;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.inner1 {
  width: 400px;
  height: 400px;
  background: yellow;
}

.box代表父div，.inner1和.inner2代表两个子div。通过调整.inner1和.inner2的宽高和背景颜色，可以轻松修改重叠效果和视觉样式。

标签： html css