[分享]css两个div重合

在网页设计中，经常会用到两个或多个div重合在一起的效果。这种效果可以用CSS来实现。下面我们来看一下如何通过CSS实现两个div重合。/ HTML代码 / / CSS代码 / .box { : ...

在网页设计中，经常会用到两个或多个div重合在一起的效果。这种效果可以用CSS来实现。下面我们来看一下如何通过CSS实现两个div重合。

/* HTML代码 */
<div class="box box1"></div>
<div class="box box2"></div>

/* CSS代码 */
.box {
  position: relative;
  width: 100px;
  height: 100px;
}

.box1 {
  background-color: #FFDAB9;
  z-index: 1;
}

.box2 {
  background-color: #FF69B4;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
} 

在上面的代码中，我们首先创建了两个div，它们分别有box1和box2的class名称。这两个div都具备100px的宽高，并分别设置不同的背景色。

为了实现两个div的重叠效果，我们需要将其中一个div的position属性设置为absolute，并设置其left和top属性为50%。接着，我们还需要使用CSS3的transform属性，将这个div定位到和窗口中心重合的位置。

最后，我们为两个div分别设置不同的z-index属性。因为box2的z-index值比box1的大，所以后者会被前者覆盖。

通过上述代码，我们可以实现两个div的完美重叠效果。这种方法还可以用于其他需要重叠的元素，如图片、文字等。