position详解-优快云博客

本文详细解析了CSS中元素的五种定位方式：static、relative、absolute、fixed及inherit。阐述了每种定位方式的特点及其如何影响页面布局，并特别强调了absolute和fixed定位在实际应用中的注意事项。

position: static|relative|absolute|fixed;

Value	Description
static(default)	Elements renders in order, as they appear in the document flow.
absolute	The element is positioned relative to its first positioned (not static) ancestor element
fixed(ie6 not supported)	The element is positioned relative to the browser window
relative	The element is positioned relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position
inherit	The value of the position property is inherited from the parent element

position:absolute;

设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局。假如其他具有不同 z-index 属性的对象已经占据了给定的位置，他们之间不会相互影响，而会在同一位置层叠。此时对象不具有外边距( margin )，但仍有内边距( padding )和边框( border )。
要激活对象的绝对(absolute)定位，必须指定 left ， right ， top ， bottom 属性中的至少一个，并且设置此属性值为absolute 。否则上述属性会使用他们的默认值 auto ，这将导致对象遵从正常的HTML布局规则，在前一个对象之后立即被呈递。

TRBL属性（TOP、RIGHT、BOTTOM、LEFT）只有当设定了position属性才有效。
当设定position:absolute
如果父级（无限）默认设置position:static属性，那么当前的absolute则结合TRBL属性以浏览器左上角为原始点进行定位
如果父级（无限）设定position属性为非static值，那么当前的absolute则结合TRBL属性以父级（最近）的左上角为原始点进行定位。

position:fixed;

ie6不支持position:fixed;值，解决此问题可参考http://blog.youkuaiyun.com/bill200711022/article/details/7046286