[分享]css两个盒子的下面重合

在网页设计中，经常需要将不同的盒子摆放在不同的位置以达到想要的布局效果。但有时候，我们需要让两个盒子重合在一起，这就需要用到CSS中的zindex属性。zindex是CSS中一个表示元素在垂直方向上的...

在网页设计中，经常需要将不同的盒子摆放在不同的位置以达到想要的布局效果。但有时候，我们需要让两个盒子重合在一起，这就需要用到CSS中的z-index属性。

z-index是CSS中一个表示元素在垂直方向上的堆叠顺序的属性，其取值范围为整数值。当我们需要让某个元素在当前堆叠顺序上更靠前时，就可以给其设置一个更大的z-index值。

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

.box2 {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: blue;
    left: 70px;
    top: 70px;
    z-index: 2;
} 

上述代码中，我们定义了两个盒子，分别为.box1和.box2。其中，.box1处于第一个堆叠层级，.box2处于第二个堆叠层级，因此.box2将会覆盖在.box1上方。

通过使用z-index属性，我们可以在网页设计中实现很多有趣的效果。但需要注意的是，z-index只对position（包括relative，absolute和fixed）属性生效，同时它的取值不能为负数。