[分享]css两个盒子叠在一起

HTML 代码如下：

<div class="box1">box1</div>
<div class="box2">box2</div> 

.box1 {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
}

.box2 {
  width: 100px;
  height: 100px;
  background-color: blue;
  position: absolute;
  left: 20px;
  top: 20px;
} 

在CSS中，两个盒子叠在一起可以通过设置position属性为absolute来实现。在上面的代码中，box1和box2都设置了position:absolute，并且box2设置了left和top两个属性，用来控制盒子相对于box1的位置。

如果想要让box2遮盖box1，可以将box2放在box1后面，并且将z-index属性设置为一个比box1大的值。如果想要让box1遮盖box2，可以将z-index属性设置为一个比box2小的值。

另外，需要注意的是，如果父级元素没有设置position属性，那么设置position:absolute的子元素会以body作为参考点进行定位。