理解CSS相对定位

一、相对定位的概念

CSS相对定位是一种元素定位的方法，是基于元素本身原本所在位置进行微调。通过设置相对位置的方式，根据需要进行上下左右的微调，不会脱离文档流。一旦调整位置之后，元素所占的空间大小不会改变影响其他元素的排布。

    <div class="relative">
        <img src="example.jpg" alt="example">
        <p>hello,world</p>
    </div>

    .relative{
        position: relative;
        top: 10px;
        left: 20px;
    }

二、相对定位的参考对象

当我们设置一个元素为相对定位时，一定要注意相对于哪一个元素进行位置调整。默认情况下，相对定位是相对于元素本身所在位置进行微调，即相对位置的参考点是元素本身。但是，我们也可以通过设置元素的父级元素的位置，来调整元素的位置。

    <div class="parent">
        <div class="relative">
            <img src="example.jpg" alt="example">
            <p>hello,world</p>
        </div>
    </div>

    .parent{
        position: relative;
        top: 50px;
        left: 100px;
    }

    .relative{
        position: relative;
        top: 10px;
        left: 20px;
    }

三、相对定位的与其他定位方式的区别

相对定位与其他定位方式（如：绝对定位，固定定位）不同之处在于，相对定位不会脱离文档流，不影响其他元素的位置。相对定位的元素还会保留其原有的空间大小，因此不会影响其他元素的布局。

四、相对定位的应用场景

相对定位常用于微调某个元素的位置，同时不影响其他元素的位置。通过与其他的定位方式配合使用，可以实现比较复杂的页面布局。

以下是一个相对定位与绝对定位组合使用的例子：

    <div class="wrapper">
        <div class="relative">
            <img src="example.jpg" alt="example">
        </div>
        <div class="absolute">
            <p>hello,world</p>
        </div>
    </div>

    .wrapper{
        position: relative;
    }

    .relative{
        position: relative;
        top: 50px;
        left: 100px;
    }

    .absolute{
        position: absolute;
        top: 20px;
        left: 10px;
    }

五、相对定位的优点和缺点

相对定位的优点是灵活性较高，可以针对单个元素进行微调，不影响其他元素的排布。同时，相对定位可以使用动画等方式来进行元素的移动或者是微调。

相对定位的缺点是，由于元素并没有脱离文档流，因此在页面排布时需要特别注意有无重叠或者出现其他排布问题。