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

在前端开发中，有时需要实现两个盒子交错叠在一起的效果，这个效果可以通过CSS实现。假设有一个父盒子，内部有两个子盒子，现在需要让这两个子盒子交错叠在一起。 首先需要设置父盒子的为relative...

在前端开发中，有时需要实现两个盒子交错叠在一起的效果，这个效果可以通过CSS实现。

假设有一个父盒子，内部有两个子盒子，现在需要让这两个子盒子交错叠在一起。

<div id="parent">
    <div class="child1"></div>
    <div class="child2"></div>
</div> 

首先需要设置父盒子的position为relative，这样内部的子盒子可以根据父盒子进行定位。然后需要对两个子盒子进行定位。

#parent {
    position: relative;
}

.child1 {
    position: absolute;
    top: 0;
    left: 0;
}

.child2 {
    position: absolute;
    top: 50px;
    left: 50px;
} 

上面的代码中，child1的定位是在左上角，而child2的定位是在x轴和y轴上各偏移了50px。

此时两个盒子就会交错叠在一起，但是如果给这两个盒子加上背景色，就会发现它们是覆盖在一起的。

这时候需要让child1在上面，child2在下面，可以通过z-index属性来实现。

.child1 {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.child2 {
    position: absolute;
    top: 50px;
    left: 50px;
    z-index: 0;
} 

上面的代码中，child1的z-index为1，表示在上层，而child2的z-index为0，表示在下层。

这样，就可以实现两个盒子交错叠在一起的效果了。