css建了两个盒子重叠了

今天我学习了CSS的一个有趣的特性，就是可以通过建立多个盒子并让它们重叠在一起，来创造出更加复杂的视觉效果。

/* CSS 代码 */.box1 {
         width: 200px;
         height: 200px;
         background-color: red;
         position: absolute;
         top: 100px;
         left: 100px;
         z-index: 2;
 }
 .box2 {
         width: 300px;
         height: 300px;
         background-color: blue;
         position: absolute;
         top: 150px;
         left: 150px;
         z-index: 1;
 }
    

如上述代码所示，我们建立了两个盒子，一个宽200px，高200px，红色的.box1，以及一个宽300px，高300px，蓝色的.box2。通过设置它们的position属性为absolute（这将使它们脱离文档流并变得可拖动），我们可以控制它们在文档中的位置。在这里，.box1的位置是距离文档顶部100像素，距离文档左侧100像素，而.box2的位置是距离文档顶部150像素，距离文档左侧150像素。

然后，我们使用z-index属性来定义它们的叠放顺序。z-index值越高的盒子将叠放在越上面。在这种情况下，.box1的z-index为2，.box2的z-index为1，因此.box1将在.box2的上方。

在浏览器中预览这段代码，我们可以看到.box1的红色部分盖在了.box2的蓝色部分上。通过缩放和移动这两个盒子，我们可以创建出各种复杂的重叠效果，如遮罩层、对话框、背景模糊等等。

总之，CSS的元素重叠功能为我们提供了一个很好的创意和设计空间，让我们可以创造出更加复杂和酷炫的页面，这也是我们学习CSS不可或缺的一部分。

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