position的用法

*星号为便于本人个人理解的理解方式，如理解有误请指出

position: absolute

使元素脱离原来的文档流，相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。
会生成一个块级框。
*相当于将元素放置到原来页面层的上层图层，对下层不会产生干扰。
top / bottom / left / right 属性使元素相对于默认位置进行移动。（默认 top: 0; left:0，元素位于父包含块的左上角）

position: relative

使元素相对于原来的位置移动，但文档流中保留元素初始所占的空间。
*相当于在原页面层用透明色替代了元素，并元素置于上层图层。
top / bottom / left / right 属性使元素相对于原来位置进行相对移动。（默认 top: 0; left:0，元素不移动）

position: absolute 与 position: relative 的结合使用

为前辈元素设置属性 position: relative，其后辈元素设置属性 position: absolute，可以使后辈属性相对于前辈属性的位置进行定位布局。

position: fixed

生成绝对的定位，相对于浏览器窗口进行定位。页面滚动，元素的位置相对于始终不变。
*会生成一个块级框。