CSS大神必看！div嵌套居中&重叠技巧详解

本文详解CSS中嵌套div的居中和重叠技巧，尤其针对CSS大神级开发者。通过巧妙运用`position: absolute`、`transform: translate(-50%, -50%)`以及`z-index`属性，实现一个大div和一个小div在父div中水平垂直居中并层叠显示的效果，且子div不会超出父div范围，父div样式不受影响。文章提供完整HTML结构和CSS代码，并详细解释每个属性的作用，助你轻松掌握div嵌套布局的精妙之处。

巧妙运用CSS实现嵌套div的居中与重叠效果

本文将演示如何使用CSS在父div中实现两个子div的水平垂直居中和层叠显示。其中一个子div尺寸大于另一个，且所有div都必须保持在父div的范围内，同时不影响父div的样式。

为了实现div的层叠效果，我们将利用CSS的position: absolute属性。这使得子div可以相对于父div进行精确定位，从而实现层叠和居中。

以下为具体的代码实现：

HTML结构：

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

CSS样式：

.container {
  width: 500px;
  height: 500px;
  border: 5px solid red;
  margin: 100px auto; /* 父div水平居中 */
  position: relative; /* 将父div设置为相对定位 */
}

.inner-large,
.inner-small {
  width: 200px;
  height: 200px;
  background-color: blue;
  position: absolute; /* 子div设置为绝对定位 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 实现水平垂直居中 */
}

.inner-large {
  width: 400px;
  height: 400px;
  background-color: yellow; /* 大的div */
  z-index: 1; /* 设置z-index以控制层叠顺序 */
}

.inner-small {
  z-index: 2; /* 设置z-index以控制层叠顺序 */
}

在这个例子中，父div .container 使用 margin: 100px auto; 实现水平居中，并设置 position: relative 作为子div的定位参考。 两个子div .inner-large 和 .inner-small 都使用了 position: absolute，并通过 top: 50%; left: 50%; transform: translate(-50%, -50%); 巧妙地实现了在父div内的水平和垂直居中。z-index 属性则控制了 .inner-small 位于 .inner-large 之上。 由于 .inner-large 的尺寸大于 .inner-small，因此 .inner-small 将被部分遮挡，从而实现了层叠效果。 整个结构保证了子div不会超出父div的范围，并且父div的样式不受影响。

理论要掌握，实操不能落！以上关于《CSS大神必看！div嵌套居中&重叠技巧详解 》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！