CSS 定位
使用position属性给网页进行定位，position样式的取值有如下几种：
- static：默认值，没有定位或者叫静态定位。
- relative：相对定位
- absolute：绝对定位
- fixed：固定定位
一、static定位
111
222
我们可以看到div1和div2基本标准文档流自动定位，即div1在上，div2紧接着在下。两个div都被包含在big容器里面。
二、relative定位
relative定位：相对自身原来位置进行偏移；偏移位置通过top,bottom,left,right来进行设置。
111
222
我们可以看到DIV2在相对自身原来位置的基础上，向下偏移100PX，向右偏移100PX；相对定位仍然在标准文档流中。
三、absolute定位
绝对定位：相对于最近的一个“已经定位”的“祖先元素” 为基准进行偏移，这句话不好理解，我们看如下代码：
Position定位-absolute
111
222
此时，DIV2并没有相对于big进行偏移，虽然big是div2的最近祖先元素，但是big没有定位，此时会继续寻找上一级已经定位的祖先元素，一直找下去，找到了则相对于这个祖先元素进行偏移，如果一直找不到，则相对于body元素进行偏移，所以在上述代码中DIV2相对于body元素进行了向下偏移100PX，向右偏移100PX。
在看如下代码，给big添加relative定位：
Position定位-absolute
111
222
此时由于DIV2的父级元素big有了定位，所以DIV2相对于big进行了向下偏移100PX，向右偏移100PX，为了实现子元素相对于父元素绝对定位，通常我们将父元素设置position:relative，而将子元素设置position:absolute。
绝对定位已经完全脱离了标准文档流。
四、fixed定位
固定定位：类似绝对定位，不过区别在于定位的基准不是祖先元素，而是浏览器窗口。所以只要固定定位，不管浏览器的滚动条如何滚动，该定位元素不会随着滚动条的滚动一起移动，而是一直静止在那里。
111
222
我们可以看到DIV2相对于浏览器上方向下偏移100PX，相对于浏览器右边向左偏移10PX；如果网页内容很长，不管浏览器滚动条如何滚动，DIV2的位置不会受到滚动条滚动的影响。
固定定位已经完全脱离了标准文档流。
五、z-index
z-index:调整元素定位时重叠层的上下位置，默认值为0
我们可以看到DIV1覆盖在DIV2的上面。