相对定位position: relative以及相对定位不脱标

最新推荐文章于 2023-10-21 09:42:12 发布

正在修炼web的小芮

最新推荐文章于 2023-10-21 09:42:12 发布

阅读量608

点赞数

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

本文链接：https://blog.csdn.net/m0_71814235/article/details/125644377

版权

相对定位有2个作用：

（1）自己位置的微调。相对定位，就是微调元素位置的。让元素相对自己原来的位置，进行位置调整。

（2）子绝父相

自己位置的微调：

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 220px;
            height: 220px;
        }
        .box1{
            background-color: yellowgreen;
        }
        .box2{
            background-color: pink;
             /* 我们想让盒子2，自己发生 位置的微调（自己向左移动100px，向下移动150px） */
             /* 相对定位 */
             position: relative;
             left: 100px;
             top: 15px;
        }
        .box3{
            background-color: skyblue;
        }
    </style>
</head>
<body>
    
   <div class="box box1"></div>
   <div class="