目前大部分的浏览器都支持position样式，在IE8及其以下版本的IE浏览器是不支持position内的inherit值的。
来看看position都有些什么值
| 属性 | 解析 |
|---|---|
| static | 默认值，表示无定位 |
| absolute | 表示采用绝对定位方式，相对于position值不是static的父容器进行定位，该值会使元素脱离文档流，使用该值后可以用left，right，top，bottom对元素进行移动定位 |
| relative | 表示采用相对定位的方式，相对于元素原本的位置进行定位，该值不会使元素脱离文档流，使用该值后可以用left，right，top，bottom对元素进行移动定位 |
| fixed | 表示采用固定定位的方式，相对于浏览器窗口进行定位，并且无论滚动条怎么滚动，使用了该值的元素都始终处于固定位置，该值会使元素脱离文档流，使用该值后可以用left，right，top，bottom对元素进行移动定位 |
absolute定位
- 解析
absolute生成绝对定位元素，参照position值不是static的父容器，使用left，right，top，bottom进行定位，如果采用absolute的元素直接父容器position值为static，那么则会查询更上一层的父容器的position值，直到<body>标签。 - 范例：验证absolute的定位方式
如下代码，当对元素a设置了absolute后，再对其父元素设置position值部位static后，a的定位相对于其父元素：
但是当使其父元素的position值为static后，a元素就相对于<body>标签进行定位了，由此也验证了<body>标签的position值不为static，这个是比较特殊的。
relative定位
- 解析
relative是相对的意思，顾名思义就是相对于元素本身在文档中应该出现的位置来移动这个元素，可以通过left，right，top，bottom来移动元素的位置，实际上该元素依然占据文档中原有的位置，只是视觉上相对原来的位置有移动。 - 范例：验证 relative的定位方式及其是否处于文档流中的位置
1.验证其定位方式，如下图所示，因为relative是相对于自身进行定位，所以并不需要在其父元素上添加absolute / relative / fixed：
2.验证其是否还处于文档流中原本的位置，如下图所示，a元素绝对定位后，b元素并没有因为a元素从本来位置移开而上移，证明其真正位置依旧是原本所占的位置，只是看起来移动走了：
3.相对于上面这个例子，我们再来验证absolute定位对文档流产生的影响，与上面例子一样的代码，只是因为a标签采用了absolute，b元素就上移了，证明a此时已经不处于文档流中的位置
fixed定位
解析
fixed的中文意思是固定的，不变的，而fixed是相对于浏览器窗口进行定位的，所以总的功能形容就是设置了该值的元素始终处于浏览器的固定位置不变，因为他是相对于浏览器窗口进行的定位，所以和absolute不同，他不需要在父元素上设置position值不为static。验证：小广告始终在你眼前
向下滚动后：
