CSS属性列表 - 定位属性

属性	版本	简介
position	CSS2/3	检索对象的定位方式
z-index	CSS2	检索或设置对象的层叠顺序
top	CSS2	检索或设置对象与其最近一个定位的父对象顶部相关的位置
right	CSS2	检索或设置对象与其最近一个定位的父对象右边相关的位置
bottom	CSS2	检索或设置对象与其最近一个定位的父对象底边相关的位置
left	CSS2	检索或设置对象与其最近一个定位的父对象左边相关的位置
clip	CSS2/3	检索或设置对象的可视区域。区域外的部分是透明的

position

语法
position：static | relative | absolute | fixed | center （CSS3） | page（CSS3）
适用于：除display属性定义为 table-column-group 和 table-column之外的所有元素
取值
static： 对象遵循常规流。top，right，bottom，left等属性不会被应用。
relative： 对象遵循常规流，并且依据自身在正常流中的位置通过top，right，bottom，left属性进行偏移时不影响常规流中的任何元素。层叠通过z-index属性定义。
absolute： 对象脱离常规流，使用top，right，bottom，left等属性进行绝对定位，盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠，其层叠通过z-index属性定义。
fixed： 对象脱离常规流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。IE6及以下不支持此参数值
center： 对象脱离常规流，使用top，right，bottom，left等属性指定盒子的位置或尺寸大小。盒子在其包含容器垂直水平居中。盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠，其层叠通过z-index属性定义。（CSS3）
page： 盒子的位置计算参照absolute。（CSS3）
兼容性
IE6及更早浏览器不支持position属性的fixed参数值。
不支持position属性的CSS3新增属性值: center | page。

z-index

语法
z-index：auto | <integer>
适用于：定位元素。即定义了position为 relative | absolute | fixed | center | page 的元素
取值
auto：遵从其父对象的定位
<integer> ：用整数值来定义堆叠级别，可以为负值。最大为2147483647
说明
检索或设置对象的层叠顺序。
并级的对象，此属性参数值越大，则被层叠在最上面。
如两个对象的此属性具有同样的值，那么将依据它们在HTML文档中流的顺序层叠，写在后面的将会覆盖前面的。
必须定义position属性值为 relative | absolute | fixed | center | page，此取值方可生效。
对应的脚本特性为zIndex。
兼容性
所有的浏览器都支持

top、right、left、bottom

语法
top/right/left/bottom：auto | <length> | <percentage>
适用于：定位元素。即定义了position为 relative | absolute | fixed | center | page 的元素
取值
auto： 无特殊定位，根据HTML定位规则在文档流中分配
<length> ： 用长度值来定义距离顶部的偏移量。可以为负值。
<percentage>： 用百分比来定义距离顶部的偏移量。可以为负值。
说明
检索或设置对象与其最近一个定位的父对象顶部/右边/左边/底边相关的位置。
必须定义position属性值为 relative | absolute | fixed | center | page，此取值方可生效。
对应的脚本特性为top/right/left/bottom。
兼容性
所有的浏览器都支持

clip

语法
clip：auto | <shape>
<shape> :
rect(<number> |auto <number>|auto <number>|auto <number>|auto)
inset(<number>|auto <number>|auto <number>|auto <number>|auto)（CSS3）
适用于：绝对定位元素
取值
auto： 对象无剪切
rect(<number> |auto <number>|auto <number>|auto <number>|auto)： 依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值，其中任一数值都可用auto替换，即此边不剪切。
上-左 方位的裁剪：从0开始剪裁直到设定值，即 上-左 方位的auto值等同于0；
右-下 方位的裁剪：从设定值开始剪裁直到最右边和最下边，即 右-下 方位的auto值为盒子的实际宽度和高度；
示例：clip:rect(auto 50px 20px auto)
说明：上边不剪切，右边从第50个像素开始剪切直至最右边，下边从第20个像素开始剪切直至最底部，左边不剪切
inset(<number>|auto <number>|auto <number>|auto <number>|auto)： 该剪裁方式与 rect() 类似，不同的是 inset() 的剪裁，每个方位都是参照该方位的边界来进行裁剪的。
上-右-下-左 方位的裁剪：从0开始剪裁直到设定值，即 上-右-下-左 方位的auto值都等同于0；（CSS3）
说明
检索或设置对象的可视区域。区域外的部分是透明的。
必须将position的值设为absolute，此属性方可使用。
兼容性
IE7及更早浏览器只支持rect()内部的数值以空格分隔的方式，不支持以逗号分隔。
不支持clip属性的CSS3新增属性值: inset()。