相对定位

position 的值为 relative 时，就是开启了相对定位。

当元素开启了定位以后，可以通过偏移量来设置元素的位置。偏移量可以通过 left、top、right、button 来设置。一般情况下，只使用两个值即可定义一个元素的位置。

开启元素的相对定位后，如果不设置偏移量元素不会发生任何变化。

相对定位元素相对其本身在文档流中的位置来定位。

相对定位的元素不会脱离文档流。

相对定位不会改变元素的性质，块元素还是块元素，内联元素还是内联元素。

相对定位的元素会提升一个层级。也就是说会盖过之前层级的盒子。

例子

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            #box1{
                width: 200px;
                height: 200px;
                background-color: red;
            }
            #box2{
                width: 200px;
                height: 200px;
                background-color: yellow;
            }
            #box3{
                width: 200px;
                height: 200px;
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <div id="box1">box1</div>
        <div id="box2">box2</div>
        <div id="box3">box3</div>
    </body>
</html>

View Code

设置相对定位跟偏移量。

偏移量也可以设置为负数。

偏移量正负效果对比：