[分享]css两个盒子重合上下重叠

如果你想要让两个CSS盒子上下重叠，实际上有两种方法可以实现。以下是两种方法的示例：

方法一：

.box1 {
   height: 200px;
   width: 200px;
   background-color: red;
}

.box2 {
   height: 200px;
   width: 200px;
   background-color: blue;
   position: relative;
   top: -100px;
} 

这个方法利用了相对定位来将第二个盒子向上移动了100个像素。由于第一个盒子的高度也是200个像素，因此第二个盒子会与第一个盒子重叠，并且在垂直方向上向上偏移了100个像素。

方法二：

.box1 {
   height: 200px;
   width: 200px;
   background-color: red;
   position: absolute;
   z-index: 1;
}

.box2 {
   height: 200px;
   width: 200px;
   background-color: blue;
   position: absolute;
   top: 100px;
   z-index: 2;
} 

这个方法利用了绝对定位以及z-index属性。第一个盒子被定位为绝对定位，并且z-index属性被设为1。第二个盒子也是绝对定位，但它会向下移动100个像素，并且z-index被设为2。由于第二个盒子的z-index更高，所以它会在第一个盒子上方重叠，而不是覆盖它。

这两种方法都可以让两个CSS盒子上下重叠。选择哪一种方法取决于你的需求和你的代码。希望这篇文章对你有所帮助！