1.定位position的五种值：
静态定位(默认static)、相对定位、绝对定位、固定定位、粘性定位
(1) 静态定位就是默认的文档流布局，块级元素竖向排列，内联元素横向排列
(2) 元素处于文档流中，只能依次排布，不能随意改变自己的位置
(3) 常用的三种定位：相对定位、绝对定位、固定定位
2.定位的移动属性：
top/bottom/left/right 值可以是长度值也可以是百分比 负值为反方向
注意：一定要先使用定位属性，才能使用以上四个值使元素移动!
3.层级z-index
设定一个定位元素，当元素之间发生重叠时，z-index值大的元素会覆盖小的元素
(1) z-index的值越大，层级越高
(2) 值为整数值，没有任何单位
(3) 默认值auto,可以看作是层级0，还可以取负值
4.相对定位: position:relative;
(1) 使用相对定位的元素不会脱离文档流，还保有原来的位置支撑父元素，所以不会影响父级
(2) 使用相对定位的元素可以通过top/bottom/left/right调整自己的位置
(3) 使用相对定位可能会发生元素的堆叠，想改变堆叠次序可以使用z-index调整元素层级
(4) 相对定位的参照物是元素原来的位置
(5) 相对定位与margin的区别是不会挤开其他元素，而是会发生堆叠
5.绝对定位: position:absolute;
(1) 使用绝对定位的元素会脱离文档流，释放原有的布局空间，不再支撑父元素
(2) 使用绝对定位的元素可以通过top/bottom/left/right调整自己的位置
(3) 使用绝对定位可能会发生元素的堆叠，想改变堆叠次序可以使用z-index调整元素层级
(4) 绝对定位的参照物是距离自己最近的且有非静态定位属性的祖先元素
(5) 使用技巧：子绝父相 父亲用相对定位影响最小最温和，但若父级已有定位属性，就不用重复添加了
注意：如果父级没有设置定位属性，参照物会一路向上找，终点是根元素html
6.固定定位: position:fixed;
(1) 使用固定定位的元素会脱离文档流，释放原有的布局空间，不再支撑父元素
(2) 使用固定定位的元素可以通过top/bottom/left/right调整自己的位置
(3) 使用固定定位可能会发生元素的堆叠，想改变堆叠次序可以使用z-index调整元素层级
(4) 固定定位的参照物是HTML根元素(浏览器窗口)
注意: 行内元素使用固定定位会块状化
小结：相对定位 relative 不会脱离文档流，支撑父元素 参照物是元素原来的位置
绝对定位 absolute 会脱离文档流，释放原有的布局空间，不再支撑父元素 参照物是距离自己最近的且有非静态定位属性的祖先元素
固定定位 fixed 会脱离文档流，释放原有的布局空间，不再支撑父元素 参照物是HTML根元素(浏览器窗口)
标签：定位,参照物,元素,堆叠,文档,使用 From： https://www.cnblogs.com/Y-Gang66/p/17177932.html