position、z-index、top、right、bottom和left属性

一、Position

1、语法：position:static/ absolute / fixed / relative

2、参数：

（1）static：默认值，无特殊定位，对象遵循HTML定位规则。

（2）absolute：将对象从文档流中拖出，使用left，right，top，bottom等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据body对象。而其层叠通过z-index属性定义。

（3）relative：对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置。

（4）fixed：对象定位遵从绝对（absolute）方式。

3、说明：

对象的定位方式。

设置此属性值为absolute会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局。假如其他具有不同z-index属性的对象已经占据了给定的位置，他们之间不会相互影响，而会在同一位置层叠。

此时对象不具有外边距margin，但仍有内边距padding和边框border。

对应的脚本特性为：position。

4、示例：

5、提示：

（1）由上面的例子可以看出，只有position属性值为absolute或relative时top、right、bottom、left才有效。

（2）目前还不支持position:fixed的属性值。

二、z-index

1、语法：z-index:auto/ number

2、参数：

（1）auto：默认值，遵从其父对象的定位。

（2）number：无单位的整数值，可为负数。

3、说明：

设置对象的层叠顺序。

较大number值的对象会覆盖在较小number值的对象之上。如两个绝对定位对象的此属性具有同样的number值，那么将依据它们在HTML文档中声明的顺序层叠。对于未指定此属性的绝对定位对象，此属性的number值为正数的对象会在其之上，而number值为负数的对象在其之下。设置参数为null可以移除此属性。

此属性仅仅作用于position属性值为relative或absolute的对象上。

对应的脚本特性为：zIndex。

4、示例：

5、提示：

（1）z-index只有position属性的值为relative或absolute时才有效。

三、Top、Right、Bottom、Left

四个属性的设置都是相同的，下面以Top为例。

1、语法：top:auto/ length

2、参数：

（1）auto：默认值，无特殊定位，根据HTML定位规则在文档流中分配。

（2）length：由浮点数字和单位标识符组成的长度值或者百分数。必须定义position属性值为absolute或者relative此取值方可生效。请参阅长度单位

3、说明：

设置对象与其最近一个定位的父对象顶部相关的位置。

对应的脚本特性为：top。其值为一字符串，所以不可用于脚本中的计算。请使用style对象的posTop，pixelTop，以及对象的offsetTop等特性。