相对定位和绝对定位的用法

JC chen

已于 2022-03-02 12:38:52 修改

阅读量2.5k

点赞数 2

于 2022-03-01 21:02:31 首次发布

本文链接：https://blog.csdn.net/aa1959678556/article/details/123212839

版权

本文介绍了CSS中的相对定位和绝对定位，详细解释了两者的区别。相对定位`relative`是基于元素自身位置进行位移，不脱离文档流；绝对定位`absolute`则相对于最近的`relative`父元素定位，可脱离文档流。使用口诀：父相子绝。在前端布局中，合理运用这两个定位方式对页面布局至关重要。

摘要由CSDN通过智能技术生成

前言

定位+位移是前期学习的重要知识点之一

一、相对和绝对定位是什么？

定位是用position属性进行固定元素在浏览器中的位置的一种方法。

二、怎么使用？

定位一般position：relative；position：absoulte；用配合top、left、right、bottom进行位移

三、relative和absoulte的区别？

1.relative是相对于自己现在的位置进行定位如果元素用了position：relative；那么用top、left、right、bottom这些属性位移时，就是以自己现在的位置为参考进行位移。不脱离文档流

例子：

 <style>
        .box{
            width: 500px;
            height: 500px;
            position: relative;/*相对定位*/
            margin: 50px auto; 
            background-color: brown;
            top: 100px;   /*位移属性*/
        }
    </style>
 <div class="box"></div>

box会以原来所在的位置向下移动100px；