CSS设计指南笔记：定位篇

position 属性有4 个值：static、relative、absolute、fixed，默认值为static

静态定位：static

在静态定位的情况下，每个元素都处在常规文档流中。

相对定位：relative

相对的是它原来在文档流中的位置（或者是默认位置）。可以用top 、right 、bottom、left属性来改变它的位置。

除了自身相对于原始位置挪动了之外，页面没有发生任何变化，这个元素原来占据的空间没有动，其他元素也没有动。

绝对定位：absolute

绝对定位会把元素彻底从文档流中拿出来。元素之前占据的空间被“回收”。绝对定位的元素会完全脱离常规文档流，他现在是相对于顶级元素body在定位。

绝对定位元素的定位上下文是body，所以在页面滚动的时候，为了维护与body元素的相对位置关系，它会相应的移动。

固定定位：fixed

固定定位元素的定位上下文是视口（浏览器窗口或手持设备的屏幕），因此它不会随页面滚动而滚动。

事实上，只要把元素的外边距和内边距设定好，多数情况下只用静态定位就足以实现页面布局了。很多刚开始接触CSS 的初学者都会错误地设定position 属性，最终才发现从文档流中挪出来的这些元素一点也不好控制。因此，除非真需要那么做，否则不要轻易修改元素默认的position 属性。