POSITION定位有几种，各有什么特点

1 背景介绍

position 是CSS用来为HTML文档的一些元素提供定位的属性,定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。常规取值：   1.static(静态）   2.Relative(相对）      3.Absolute(绝对)   4.fixed(固定)。

2 知识剖析

static就是一般元素的初始属性，不受top，left，right，bottom影响。

relative是相对定位，受前面四种属性的影响，但是文档流占的位置还在，不会被后面的元素挤占，定位方式是以其在文档流中的位置的左上角进行定位。

定位前

定位后

absolute为绝对定位，受到前面四种属性的影响并且不再占据文档流，定位方式是如果祖先元素有不为static的定位方式，那么就以其左上角为参照进行定位，如果没有，那么就以最初的包裹元素为参照，一般就是html文档本身，一般认为是body，但是并不是很准确。

定位前

祖先元素没有非static定位时

祖先元素有非static定位时

fixed定位的定位方式是以浏览器窗口进行定位，不受滚动条的影响，其他性质和absolute差不多。fixed定位网上很常见，比如电商网站的搜索栏，在你下拉滚动条查看内容的时候搜索栏一般都是固定在屏幕上的，那一般就是用了fixed。

3 常见问题

相对定位和绝对定位的搭配使用效果？

4 解决方案

绝对定位是以非static定位的祖先元素进行定位，如果没有则以最初的包裹元素进行定位，所以我们可以利用这个性质给父元素进行相对定位，相对定位本身对元素本身没有任何不好的地方，这样反而可以便于控制子元素的定位，搭配使用效果很好。

5 扩展思考 -fixed都有哪些应用？

上面也提到一点，就是固定页面，网上常见的比如说广告位，搜索栏都可以见到fixed定位的影子。

6

参考文献

http://www.cnblogs.com/polk6/archive/2013/07/26/3214847.html#Menu1-JieShao