css两个盒子有重叠部分

那么如何让两个盒子重叠在一起呢？

.box1 {
   position: absolute;
   top: 50px;
   left: 50px;
   width: 200px;
   height: 200px;
   background-color: blue;
   z-index: 1;
}

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

上面是两个盒子的CSS代码。其中，box1是蓝色盒子，box2是红色盒子，它们的位置重叠在一起。

重叠的关键在于z-index属性。它指定了盒子在z轴方向上的位置，数值越大，显示在越上方。所以，box2的z-index值比box1的大。

除了z-index，还有其他 CSS 属性可以控制盒子的位置、大小和显示方式。比如，position属性用于设置盒子的定位方式，可以设置为relative、absolute或fixed等。

总之，当我们需要让两个盒子重叠时，需要设置它们的z-index属性，让显示在最上方的盒子的z-index值比另一个盒子的大即可。