H5布局阶段四（定位）

一. 定位

定位分为相对定位(relative)，绝对定位(absolute)，固定定位(fixed)和默认状态(没有定位,static)

相对定位 relative

语法：开启：position:relative; 修改位置:left:xxpx;top:xxpx;
相对定位相对的是自身原有的位置
相对定位移动后，原有位置会保留
不会影响文档流
适用于小范围移动和移动后原有位置不再使用的情况

绝对定位

语法：position:absolute;修改位置：left:xxpx;top:xxpx;
绝对定位会脱离当前文档流，父级无法获取宽高
绝对定位参考对象为具有相对定位属性的父元素，如果没有则继续向上找，知道整个文档
90%以上的绝对定位使用场景，都需要相对定位来配合
适用场景：
1.大或小范围移动同样适用，但是需要其父元素配合
2.动态去拖拽元素时，或者一些需要重叠的动画效果

固定定位

语法：position:fixed;
相对于当前浏览器窗口

二. auto

根据自身所占位置，自动居中
自身必须有宽高
inline-block或float都会使auto失效，需要填写具体值来调整元素位置
代码：

显示效果：

三. z-index

z-index用于调整当前元素的层级

注意：
1.属性值无单位，致谢数字，以分号结尾
2.调整元素过多时，需要将每个元素层级划分清楚

四. overflow

overflow 用来处理内容超出容器

属性值：
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 超出部分隐藏
scroll 无论内容超出与否，生成滚动条
auto 内容超出会自动生成滚动条
inherit 规定应该从父元素继承 overflow 属性的值。
代码：

显示效果：