position定位属性

介绍position定位属性，绝对/固定定位的定位原理以及绝对/相对定位的区别。

1. position定位属性有哪些

position: static | relative | absolute | fixed | inherit

• static：默认值，没有定位；
• relative：生成相对定位元素，相对于其正常位置进行定位；
• absolute：生成绝对定位元素，相对于static以外的第一个父元素进行定位；
• fixed：生成固定定位的元素，相对于浏览器窗口进行定位；
• inherit：规定从父元素继承position属性的值。

2. 绝对/固定定位的定位原理

• 绝对定位：absolute 相对于设置了除static定位以外的第一个父元素进行定位；

• 固定定位：fixed相对于浏览器窗口进行定位

  解析：

1. 如果父级（无限）没有设定position属性，那么当前的absolute则结合top，right，left，bottom属性以浏览器左上角为原始点进行定位。
2. 如果父级（无限）设定position属性，且属性值为relative、absolute、fixed，那么当前的absolute则结合top，right，left，bottom属性以父级（最近）的左上角为原始点进行定位。

3. 绝对/相对定位的区别

​ 主要从二者是否脱离文档流、是否会重叠、定位的参照物方面进行比较：

1. 相对定位不会脱离文档流，绝对定位脱离文档流；
2. 绝对定位的元素相互层叠，相对定位的元素不会；
3. 绝对定位的元素相对于static以外的第一个父元素进行定位，相对定位相对于其正常位置进行定位。