毋庸置疑，CSS 中的 定位 对于从事重构或者前端的人来说，其占用非常重要的地位，但是对于初学者来说，却又有几点不是很清楚，这里就向大家介绍下 CSS 中的 定位 是如何工作的。
首先，我们来看下，什么是 定位。
当浏览器下载页面内容的时候，按下载的 HTML 页面内容的顺序（例如，html、body、head、div、p等），同时就开始渲染页面，而 定位 则就是决定这些元素如何显示，例如相对位置、或者重叠等情况。其实也就是本体相对于上级的定位，这里一共有4种方式来定义 定位，其分别是：static, relative, absolute 和 fixed。其意思也即是 静态、相对、绝对、固定。
Static 定位
即静态定位，也就是在制作 HTML 页面时，元素如何排列，则定位就如何排列。从上往下的顺序。没什么可解释的。
Relative 定位
即相对定位，他是参照父级的原始点为原始点，无父级则以BODY的原始点为原始点，配合TOP、RIGHT、BOTTOM、LEFT进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位。
有时我们还需要依靠z-index来设定容器的上下关系，数值越大越在最上面，数值范围是自然数。当然有一点要注意，父子关系是无法用z-index来设定上下关系的，一定是子级在上父级在下。
更多…