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
网友评论