巧用CSS实现嵌套Div居中与重叠

本文将详细讲解如何利用CSS样式，在一个父级div容器中，实现两个子级div水平垂直居中并相互重叠的布局效果。 我们将以一个子div覆盖另一个子div的方式来解释“重叠”效果。

这是一个常见的网页设计需求：在父容器内放置大小不同的两个div，并确保它们居中且较小的div位于较大的div之上。 关键在于如何兼顾div的重叠和居中对齐。

解决方法的核心在于 position: absolute 和 margin: auto 属性的巧妙运用。 首先，父级div需要设置 position: relative，为绝对定位的子级div提供一个参照坐标系。 然后，两个子级div都设置 position: absolute; left: 0; top: 0; right: 0; bottom: 0;，这使得它们占据父级div的全部空间，从而实现重叠。 最后，margin: auto; 则确保子级div在父级div内水平和垂直居中。

以下是一个具体的代码示例：

<div class="container">
  <div class="inner-large"></div>
  <div class="inner-small"></div>
</div>

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

.inner-large,
.inner-small {
  width: 200px;
  height: 200px;
  background: blue;
  margin: auto;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.inner-large {
  width: 400px;
  height: 400px;
  background: yellow;
}

在这个例子中，.container 是父级div，.inner-large 和 .inner-small 是两个子级div，其中 .inner-large 较大，并覆盖在 .inner-small 之上。 通过设置 position 和 margin 属性，我们成功实现了子级div的重叠和在父级div内的居中显示。 需要注意的是，width 和 height 属性决定了子级div的大小，直接影响最终的重叠效果。