两个重叠盒子

Bunury

已于 2024-03-15 13:27:25 修改

阅读量574

点赞数 8

CC 4.0 BY-SA版权

分类专栏： Css 文章标签： css 前端 html

于 2024-03-15 13:27:13 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_49352307/article/details/136737095

Css 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了使用CSS（如相对和绝对定位，z-index属性）控制HTML中的重叠盒子布局，以及如何通过z-index和3D旋转（translateZ）调整元素的显示顺序。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

盒子重叠

一个盒子里面装满两个重叠盒子

通过将 .fa 定位为相对定位，并将 .son1 和 .son2 定位为绝对定位，您可以确保两个子元素充满 .fa 父容器，并根据需要进行调整。请注意，这可能会在一些情况下导致重叠或溢出，要让第二个子盒子 .son2 在层叠顺序上显示在第一个子盒子 .son1 前面，您可以使用 z-index 属性。较高的 z-index 值将使元素显示在较低值的元素之前。请注意，z-index 属性仅在定位元素上（具有 position 属性的元素）才有效

 <style>
        .fa{
            width: 200px;
            position: relative;
            height: 200px;
            background-color: blue;
        }
        .son1 ,.son2{
            position: absolute;
            width: 100%;
            height: 100%;
        }
        .son1{
            background-color: yellow;
            z-index: 2;
        }
        .son2{
            background-color: antiquewhite;
            z-index: 3;
        }
    </style>
</head>
<body>
    <div class="fa">
        <div class="son1">1</div>
        <div class="son2">2</div>
    </div>
</body>