相对定位和绝对定位的区别

相对定位和绝对定位
position 的四个值：static、relative、absolute、fixed。
相对定位：relative
绝对定位：absolute 和 fixed 统称为绝对定位
默认值：static

##HTML代码：

      <div class="test1">111</div>
    <div class="test2">222</div>
    <div class="test3">333</div>

##CSS代码：

        .test1{
            height: 50px;
            background: palevioletred;
        }
        .test2{
            height: 50px;
            background: plum;
        }
        .test3{
            height: 50px;
            background: powderblue;
        }```
##初始布局效果：
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201110215422531.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MTYxMDk0MQ==,size_16,color_FFFFFF,t_70#pic_center)
##相对定位：relative
相对于原来位置移动，不脱离文档流，不影响其他元素的布局；
将第二个 div#test2 设为相对定位，元素相对于原来位置偏移：

.test2{
height: 50px;
background: plum;
position: relative;
left: 20px;
top: 20px;
}

元素会脱离文档流，如果设置偏移量会影响其他元素的布局；
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201110220113194.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MTYxMDk0MQ==,size_16,color_FFFFFF,t_70#pic_center)
##绝对定位：absolute 元素会脱离文档流，如果设置偏移量，会影响其他元素的位置定位
     在父元素没有设置相对定位或绝对定位的情况下，元素相对于根元素定位（即html元素）（是父元素没有）。
     父元素设置了相对定位或绝对定位，元素会相对于离自己最近的设置了相对或绝对定位的父元素进行定位（或者说离自己最近的不是static的父元素进行定位，因为元素默认是static）
 ##（1） 不设置偏移量

    .test2{
        height: 50px;
        background: plum;
        position: absolute;
    }

![在这里插入图片描述](https://img-blog.csdnimg.cn/20201110222506611.png#pic_center)


##（2）设置偏移量，元素脱离文档流，且在父元素没有设置相对定位或绝对定位的情况下，元素相对于根元素定位（即html元素）

    .test2{
        height: 50px;
        background: plum;
        position: absolute;
        left: 20px;
        top: 20px;
    }

![在这里插入图片描述](https://img-blog.csdnimg.cn/20201110221741778.png#pic_center)

##**两者的区别**
相对定位：定位是相对于自身位置定位（设置偏移量的时候，会相对于自身所在的位置偏移）。设置了relative的元素仍然处在文档流中，元素的宽高不变，设置偏移量也不会影响其他元素的位置。最外层容器设置为relative定位，在没有设置宽度的情况下，宽度是整个浏览器的宽度。

绝对定位：定位是相对于离元素最近的设置了绝对或相对定位的父元素决定的，如果没有父元素设置绝对或相对定位，则元素相对于根元素即html元素定位。设置了absolute的元素脱了了文档流，元素在没有设置宽度的情况下，宽度由元素里面的内容决定。脱离后原来的位置相当于是空的，下面的元素会来占据位置。