css中子绝父相布局

最新推荐文章于 2023-05-26 23:12:28 发布

wiry_碎碎念

最新推荐文章于 2023-05-26 23:12:28 发布

阅读量141

点赞数

分类专栏： css 文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_42247414/article/details/122245440

版权

CSS布局居中对齐绝对定位偏移量前端开发

关键词由CSDN通过智能技术生成

css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

解决问题：
实现小盒子分别居中贴近大盒子左右侧

实现思路：
父盒子：box（相对定位）
子盒子：prev和next（绝对定位，设置偏移量）

实现效果：
在这里插入图片描述
代码：

html部分：

    <div class="box">
        <div class="prev"></div>
        <div class="next"></div>
    </div>

css部分：

        .box {
            /* 相对定位 */
            position: relative;
            width: 520px;
            height: 280px;
            background-color: pink;
            margin: 0px auto;
        }

        .prev, .next {
            /* 绝对定位 */
            position: absolute;
            /* 偏移父盒子高度的一半，上移子盒子高度的一半 */
            top: 50%;
            margin-top: -15px;
            width: 20px;
            height: 30px;
            background-color: powderblue;
        }

        .prev {
            left: 0;
        }

        .next {
            right: 0;
        }