css 两个div层叠展示

CSS中，通过层叠（stacking）的方式可以将多个div叠放在一起展示。这在页面布局中非常有用，可以实现各式各样的效果。

在HTML代码中，我们先定义两个div。它们的背景颜色均为蓝色，高度为200px，宽度为300px。但是它们的z-index（层叠顺序）不同：

div class="div1">
    /div>
    div class="div2">
    /div>
.div1 {
      background-color: blue;
      height: 200px;
      width: 300px;
      z-index: 1;
}
.div2 {
      background-color: blue;
      height: 200px;
      width: 300px;
      z-index: 2;
}

接下来是CSS代码。可以看到，两个div叠放在一起，但是z-index为2的div在上面，z-index为1的div在底部。

.div1 {
      background-color: blue;
      height: 200px;
      width: 300px;
      z-index: 1;
      position: absolute;
      top: 0;
      left: 0;
}
.div2 {
      background-color: blue;
      height: 200px;
      width: 300px;
      z-index: 2;
      position: absolute;
      top: 50px;
      left: 50px;
}
    

叠放顺序不仅与z-index有关，还与元素的定位方式有关。在本例中，div1和div2都采用了绝对定位。这样才能够控制它们的精确位置，并将它们叠放在一起。

通过CSS的层叠方式，我们可以实现各种各样的效果。比如，多个div层叠在一起，为页面带来更丰富多彩的视觉效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！