1.定位p
osition的五种值：
静态定位(默认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
根元素
(
浏览器窗口)