[分享]css两个盒子怎么重合

CSS中，我们经常需要让两个盒子重合，这样可以创建出一些很有趣的效果。那么，要怎么做呢？下面就来看看两个盒子如何重合。.box1 { : absolute; top: 0; left: 0; widt...

CSS中，我们经常需要让两个盒子重合，这样可以创建出一些很有趣的效果。那么，要怎么做呢？下面就来看看两个盒子如何重合。

.box1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background-color: #f00;
  z-index: 1;
}

.box2 {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  background-color: #0f0;
  z-index: 2;
} 

我们在这里声明了两个盒子，一个红色的盒子.box1和一个绿色的盒子.box2。

关键在于，我们在样式中使用了属性position。这个属性指定元素的定位方式。在这里，我们都用了absolute方式，这种方式将元素从文档流中拖离，而且定位相对于父元素。

注意在.box2中，我们指定了top和left属性。这些属性指定了.box2相对于其包含块的偏移量。这里我们让它往下移动了50个像素，往右移动了50个像素。

现在我们再看z-index属性。这个属性指定盒子的堆叠顺序，值越大的元素会被显示在值越小的元素上面。

通过使用position和z-index属性，我们就实现了两个盒子的重合。现在打开你的浏览器，查看一下效果吧！