CSS flex 布局实现层叠效果

CSS flex About 864 words

需求

图片一右边的上方叠加图片二。

实现

使用flex实现垂直方向的居中对齐。

使用absolute绝对布局，让图片二脱离文档流。

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .bg {
            background-color: red;
            padding: 10px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .img {
            width: 100%;
            height: 50px;
            background-color: green;
        }

        .btn {
            width: 30px ;
            height: 10px;
            background-color: blue;
            position: absolute;
        }
    </style>
</head>
<body>
<div class="bg">
    <div class="btn">

    </div>
    <div class="img">

    </div>
</div>
</body>
</html>

Views: 674 · Posted: 2024-02-03

———— END ————

Give me a Star, Thanks:)

https://github.com/fendoudebb/LiteNote

扫描下方二维码关注公众号和小程序↓↓↓