浮动与定位总结

① 浮动定位(float:right/left) 1）元素会脱离文档流，释放布局空间，可能会出现堆叠现象 2）如果所有子元素都浮动，父元素会高度坍塌--5种解决方案 3）浮动元素可以使用margin微调自己的位置 4）用途：在页面中实现"左右分居效果"

② 静态定位(position:static)/默认的文档流布局 1）块级元素按照书写顺序从上往下依次排列 2）行内/行内块元素按照书写顺序从左往右依次排列，一行放不下才换行 3）文档流中的元素都是紧密排布的，没有大的空隙，且没有堆叠现象

③ 相对定位(position:relative) 1）不会脱离文档流，不会释放布局空间 2）可以使用top/bottom/left/right修改自己的位置 3）可能会出现堆叠现象，可以使用z-index调整层级 4）定位参照物：自己作为静态定位元素时的位置 5）用途1：微调自己的位置，而不影响周围的元素 6）用途2：为使用绝对定位的子孙元素提供定位参照物

④绝对定位(position:absolute) 1）会脱离文档流，释放布局空间 2）可以使用top/bottom/left/right修改自己的位置 3）可能会出现堆叠现象，可以使用z-index调整层级 4）定位参照物：离自己最近的已定位的(除了static的定位)的父元素,终点是html根元素 5）用途：在页面上覆盖到其它元素上方的指定位置

⑤ 固定定位(position:fixed) 1）会脱离文档流，释放布局空间 2）可以使用top/bottom/left/right修改自己的位置 3）可能会出现堆叠现象，可以使用z-index调整层级 4）定位参照物：html根元素 5）用途：制作覆盖整个窗口的遮罩层