position属性

position属性

position有5个属性，分别为static（默认值）、relative（相对定位）、absolute（绝对定位）、fixed（固定定位）、inherit

1. static：没有定位
2. relative：相对定位，相对于原来的位置进行偏移，如果有父级，则相对于父级进行偏移
3. absolute：绝对定位，相对最近的有定位的父级（祖先级）进行偏移
4. fixed：固定定位，相对于浏览器窗口定位且位置始终不变
5. inherit：继承父元素的定位，父元素为相对定位，使用这个属性的元素也是相对定位

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

相对定位和绝对定位的有2个区别：

1. 相对定位脱离文档流，但不会影响其它元素的位置；绝对定位不仅脱离文档流，还会影响其它元素的位置，如果一个元素使用了绝对定位，这个元素移动后，它附近的元素会移动到使用绝对定位元素原本的位置上

.div1,.div2,.div3{
        border: 1px solid #333;
        }
.div1{
        width: 200px;
        height: 200px;
        }
.div2{
        position: relative;
        /* position: absolute; 换成绝对定位后div3就移到了div2的位置上 */
        top: 30px;
        width: 80px;
        height: 60px;
        }
.div3{
        width: 60px;
        height: 40px;
        }
<div class="div1">
    <div class="div2">div2</div>
    <div class="div3">div3</div>
</div>

2. 在有父级的情况下，相对定位相对于父级进行偏移；绝对定位相对于有定位的父级进行偏移，如果父级没有定位，那么会去寻找有定位的祖先级

.div1,.div2{
        border: 1px solid #333;
        }
.div1{
        position: relative;
        width: 200px;
        height: 200px;
        }
.div2{
        position: absolute;
        top: 30px;
        left: 20px;
        width: 80px;
        height: 60px;
        }
<div class="div1">
    <div class="div2">div2</div>
</div>

问题：position有几种取值，absolute和relative的区别？
知识点：position属性