position: static / inherit / relative / absolute / fixed

相对定位：（position：relative）

1. 元素添加定位以后，就可以使用以下几条样式：left / right / top / bottom / z-index

2. 相对于自身的初始位置来计算坐标

3. 不脱离文档流（元素移走之后，原始位置会被保留）

4. 提升层级（层级高的元素会覆盖层级低的元素）

TIPS=>

相对定位移走之后，原始位置会被空出来，页面会有大片的留白，因而不建议给相对定位加偏移。

一般相对定位只是用给绝对定位做父级，或者给元素自身提升层级。

绝对定位：（position：absolute）

1. 脱离文档流

2. 提升层级

3. 触发BFC

4. 根据自身定位的父级来计算坐标，如果所有的父级均没有定位，根据document来计算坐标

注：html的父级是document，不支持添加样式，document的高度和可视区的高度一致

5. 使元素支持宽高

6. 不设置宽度，宽度由内容撑开

TIPS=>

需要有一个加了定位的父级（需要有宽高的）

设置了 left 和 right 元素，如果没有宽度，就自动拉开宽度

设置了 top 和 bottom 元素，如果没有高度，就自动拉开高度

固定定位：（position：fixed）

脱离文档流

提升层级

固定在可视区的某个位置上

触发BFC

宽度不设置，宽度由内容撑开

支持宽高

TIPS=>

绝对定位的坐标计算是根据定位父级padding的左上角来进行计算的

层级问题：

z-index：层级（整数）

默认情况下，元素定位之后，后边的层级高于前边的层级

1. 数值越大，层级越高

2. 层级只能给定位的元素设置

3. 层级要在同级元素之间比较