[分享]css两个盒子重合

如果你想让两个盒子重合，可以通过使用CSS的属性来实现。属性有四个值，分别为static、relative、absolute和fixed。当我们需要两个盒子重合时，absolute和relative比...

如果你想让两个盒子重合，可以通过使用CSS的position属性来实现。position属性有四个值，分别为static、relative、absolute和fixed。当我们需要两个盒子重合时，absolute和relative比较适用。

.box1{
  position: relative;
  width: 100px;
  height: 100px;
  background-color: #f00;
}

.box2{
  position: absolute;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  background-color: #00f;
} 

在上面的示例中，box1的position属性为relative，即相对定位。这意味着当它的子元素（如box2）使用absolute进行定位时，会相对于父元素box1进行定位。而box2的top和left属性设置为50px，所以它将在box1中心重合。

此外，如果需要使盒子覆盖在其他盒子上方，可以使用z-index属性。这个属性的值越大，元素就越靠近上层。

.box1{
  position: relative;
  width: 100px;
  height: 100px;
  background-color: #f00;
  z-index: 2;
}

.box2{
  position: absolute;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  background-color: #00f;
  z-index: 1;
} 

在上面的代码中，box1的z-index属性为2，box2的z-index属性为1。这意味着box1将会覆盖在box2上方。