position详解

来源：互联网发布：知彼而知己网易博客编辑：程序博客网时间：2024/05/16 05:31

position: static|relative|absolute|fixed;

ValueDescriptionstatic(default)Elements renders in order, as they appear in the document flow.absoluteThe element is positioned relative to its first positioned (not static) ancestor elementfixed(ie6 not supported)The element is positioned relative to the browser windowrelativeThe element is positioned relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT positioninheritThe 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.csdn.net/bill200711022/article/details/7046286