position定位详解
对比说明
| 定位方式 | 说明 |
|---|---|
| static | 默认值，没有定位，元素出现在正常的流中，忽略 top, bottom, left, right ,z-index 声明 |
| absolute | 生成绝对定位元素，相对于 static 定位以外的第一个父元素进行定位。位置通过 left, top, right 以及 bottom 确定。特征：脱离正常流 |
| fixed | 生成绝对定位元素，相对于浏览器窗口进行定位。元素位置通过 left, top, right 以及 bottom 属性进行规定。特征：脱离正常流 |
| relative | 生成相对定位的元素，相对于其正常位置进行定位。因此，"left: 20" 会向元素的 left 位置添加 20 像素。特征：不会脱离正常流 |
absolute 与 fixed
共同点:
- 都会改变行内元素（inline）的呈现方式，display 会被设置为 block
- 都会让元素脱离正常流，不占据空间
- 默认都会覆盖在非定位元素之上，也可通过 z-index 声明调整覆盖顺序
不同点:
- absolute 的根元素是可以设置的；而 fixed 的根元素固定为当前窗口（应用）
- （常用）当你滚动时，fixed 元素与窗口（应用）之间的距离是不变的
absolute 与 relative
不同点
- absolute 参照的是父级元素的左上角；relative 参照元素的原始点（比如，"left: 20" 会向元素的 left 位置添加 20 像素）
- relative 的 z-index 不能定义父子的上下关系，一定是子上父下；absolute 多个层可以使用 z-index 属性改变层重叠顺序