如果你想稍微改变布局中一些盒子的位置,或者，如果您想要创建一个浮动在页面其他部分顶部的UI元素，并且/或者始终停留在浏览器窗口内的相同位置，无论页面滚动多少？定位使这种布局工作成为可能。
我们可以通过设置position属性的值来覆盖默认的布局方式（就是可以覆盖掉基本文档流行为）
- top属性
- left属性
- right属性
- bottom属性
定位分类：
静态定位
默认行为相对定位
它是占据在正常的文档流中，你可以修改它的最终位置，也可以让它与页面上的其他元素重叠。
position:relative;
代码绝对定位
代码
它不再存在于正常文档布局流中，它坐在它自己的层独立于一切。
注意：元素的位置已经改变，这是因为top,bottom,left,right以不同方式在绝对定位。他们指定元素应距离每个包含元素的边的距离，而不是指定元素应该移入的方向。
这里可能有疑问包含元素是什么？
这取决于绝对定位元素的父元素的position属性。
如果所有的父元素都没有显式地定义position属性，那么所有的父元素默认情况下position属性都是static。结果，绝对定位元素会被包含在初始块容器中。这个初始块容器有着和浏览器视口一样的尺寸，并且<html>元素也被包含在这个容器里面。简单来说，绝对定位元素会被放在<html>元素的外面，并且根据浏览器视口来定位。
总结：一个元素加了absolute,那它的父容器设置为relative;绝对定位元素可以设置宽高（类似浮动）
问题：那么两个元素重叠如何决定决定哪个覆盖哪个？
z-index
- 固定定位
固定定位固定元素则是相对于浏览器视口本身。 这意味着您可以创建固定的有用的UI项目，如持久导航菜单。
