css绝对定位的参照物

最新推荐文章于 2024-04-21 22:38:54 发布

傻她你呀

最新推荐文章于 2024-04-21 22:38:54 发布

阅读量1.8k

点赞数 5

分类专栏： CSS3 文章标签： css绝对定位的参照物

本文链接：https://blog.csdn.net/qq_41672008/article/details/102464327

版权

CSS3 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

css绝对定位的重新认知

所谓的css绝对定位，就是 position:absolute;
这里记录一个我的错误认知，就是绝对定位的参照物是内容，还是内容+内边距，我一直以为参照物就是内容，但是实际上参照物是内容+内边距
看看下面的事例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>css绝对定位的重新认知</title>
        <style>
            .box{
                width: 300px;
                height: 300px;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 16px;
                font-weight: 400;
                color: #fff;
                background-color: cornflowerblue;
                position: relative;
            }
            .son{
                position: absolute;
                top: 0;
                left: 0;
                width: 50px;
                height: 50px;
                background-color: blueviolet;
            }
        </style>
    </head>
    <body>
        <div class="box">this is a box
            <div class="son"></div>
        </div>
    </body>
</html>

你可以想到效果是这样的
但是如果给 box添加了 padding，那么绝对定位是怎样的，在 .box类中添加 padding: 50px;，来看看效果
可能你会疑惑，那边框呢，可以试试，在 .box类中添加边框 border: 50px solid hotpink;
来看看效果
可以看见并没有包含边框，因此 css绝对定位的参照物就是内容+内边距

傻她你呀

关注

5
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
css绝对定位的参照物

css绝对定位的重新认知所谓的css绝对定位，就是 position:absolute;这里记录一个我的错误认知，就是绝对定位的参照物是内容，还是内容+内边距，我一直以为参照物就是内容，但是实际上参照物是内容+内边距看看下面的事例<!DOCTYPE html><html> <head> <meta chars...
复制链接

扫一扫