[置顶] CSS常用属性-定位(Positioning)

文章来自CSS参考手册，作者：渔人码头

1.position

语法：

position：static | relative | absolute | fixed | center | page | sticky

默认值：static

适用于：除display属性定义为

table-column-group |
table-column

之外的所有元素

继承性：无

动画性：否

计算值：指定值

媒体：视觉

取值：

static：对象遵循常规流。此时4个定位偏移属性不会被应用。relative：对象遵循常规流，并且参照自身在常规流中的位置通过top，right，bottom，left这4个定位偏移属性进行偏移时不会影响常规流中的任何元素。absolute：对象脱离常规流，此时偏移属性参照的是离自身最近的定位祖先元素，如果没有定位的祖先元素，则一直回溯到

body

元素。盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠。fixed：与

absolute

一致，但偏移定位是以窗口为参考。当出现滚动条时，对象不会随着滚动。
center：与

absolute

一致，但偏移定位是以定位祖先元素的中心点为参考。盒子在其包含容器垂直水平居中。（CSS3）
page：与

absolute

一致。元素在分页媒体或者区域块内，元素的包含块始终是初始包含块，否则取决于每个

absolute

模式。（CSS3）
sticky：对象在常态时遵循常规流。它就
20c56
像是

relative

和

fixed

的合体，当在屏幕中时按常规流排版，当卷动到屏幕外时则表现如

fixed

。该属性的表现是现实中你见到的吸附效果。（CSS3）

* CSS3新增属性可能存在描述错误及变更，仅供参考，持续更新

说明：

检索对象的定位方式。
当

position

的值为

非static

时，其层叠级别通过z-index属性定义。
绝对定位的元素，在top，right，bottom，left属性未设置时，会紧随在其前面的兄弟元素之后，但在位置上不影响常规流中的任何元素。用这个特性你或许会干这样的事：demo
对应的脚本特性为position。

兼容性：

浅绿 = 支持
红色 = 不支持
粉色 = 部分支持

Values	IE	Firefox	Chrome	Safari	Opera	iOS Safari	Android Browser	Android Chrome
Basic Support	6.0+#1	2.0+#2	4.0+	6.0+	15.0+	6.0+	2.1+	18.0+
fixed	6.0	2.0+	4.0+	6.0+	15.0+	6.0+	2.1-2.3#3	18.0+
7.0+	3.0+
center | page	6.0-11.0	2.0-42.0	4.0-47.0	6.0-9.0	15.0-32.0	6.0-9.0	2.1-4.4.4	18.0-42.0
sticky	6.0-11.0	2.0-31.0	4.0-47.0	6.0	15.0-32.0	6.0-9.0-webkit-	2.1-4.4.4	18.0-42.0
32.0+	6.1-9.0-webkit-

IE如果在 quirks
mode下将不支持；
Firefox30.0开始支持 

tr

, 

thead

, 

tfoot

, 

tbody

 定义 

relative

，Firefox30.0之前的版本及其它浏览器都只能给 

table

 定义 

relative

 用以约束内部元素的定位；
需要定义了

<meta name="viewport" content="width=device-width, user-scalable=no">

才生效

2. z-index

语法：

z-index: auto | <integer>

默认值：auto

适用于：定位元素。即定义了position为

非static

的元素

继承性：无

动画性：当值为<integer>时

计算值：指定的值

媒体：视觉

取值：

auto：元素在当前层叠上下文中的层叠级别是0。元素不会创建新的局部层叠上下文，除非它是根元素。<integer>：用整数值来定义堆叠级别。可以为负值。

说明：

检索或设置对象的层叠顺序。

z-index

用于确定元素在当前层叠上下文中的层叠级别，并确定该元素是否创建新的局部层叠上下文。
每个元素层叠顺序由所属的层叠上下文和元素本身的层叠级别决定（每个元素仅属于一个层叠上下文）。
同一个层叠上下文中，层叠级别大的显示在上面，反之显示在下面。
同一个层叠上下文中，层叠级别相同的两个元素，依据它们在HTML文档流中的顺序，写在后面的将会覆盖前面的。
不同层叠上下文中，元素的显示顺序依据祖先的层叠级别来决定，与自身的层叠级别无关。
当

z-index

未定义或者值为

auto

时，在IE6,7下会创建新的局部层叠上下文，而在高级浏览器中，按照规范不产生新的局部层叠上下文，如下例：

demo：

div {position: relative;}p {position: absolute;}.a {background: #f00;z-index: 10;}.b {background: #0ff;z-index: 3;}<div class="test"><p class="a">asdas</p></div><div class="test2"><p class="b">asdas</p></div>

细心的你会发现上述代码在IE6,7下的呈现与高级浏览器下不同。.test1和.test2未设置z-index，在高级浏览器下不会产生新的局部层叠上下文，也就是说它们的子元素没有被新的局部层叠上下文包裹，那么它们的子元素就处在同一个层叠上下文中，可以直接通过自身的层叠级别来决定显示顺序，所以结果是.a 覆盖了.b，因为.a的层叠级别比.b高；而在IE6,7下，.test1和.test2会产生新的局部层叠上下文，即它们的子元素被新的局部层叠上下文包裹，于是子元素显示顺序只能依赖.test1和.test2层叠级别来确定。所以结果是.b
覆盖了.a，因为.b的父元素.test2在HTML文档流中排在.test1之后，后来者居上覆盖前者。参见demo: z-index创建局部层叠上下文在IE6,7下与高级浏览器下的区别

对应的脚本特性为zIndex。

兼容性：

浅绿 = 支持
红色 = 不支持
粉色 = 部分支持

Values	IE	Firefox	Chrome	Safari	Opera	iOS Safari	Android Browser	Android Chrome
Basic Support	6.0+	2.0+	4.0+	6.0+	15.0+	6.0+	2.1+	18.0+
负值 #1	6.0+	1.0-2.0	4.0+	6.0+	15.0+	6.0+	2.1+	18.0+
3.0+

z-index负值是CSS2.1中定义的，在CSS2中是不被支持的；

3. top、right、bottom、left

top

语法：

top: auto | <length> | <percentage>

默认值：auto

适用于：定位元素。即定义了position为

非static

的元素

继承性：无

动画性：当值为<length> | <percentage>时

计算值：当position为

static

时，计算值是

auto

。

为

relative

时，如果

top

和

bottom

都是

auto

，则它们的计算值是

0

；如果

top

和

bottom

其中一个为

auto

，则

auto

相当于另一个的负值，即top
= -bottom；如果

top

和

bottom

的值都不为

auto

，则忽略

bottom

。

否则在其它情况下，当指定值为<length>时，计算值为指定值，当指定值为<percentage>时，计算值为计算后的绝对值。除去这些情况，都为auto

媒体：视觉

取值：

auto：无特殊定位，根据HTML定位规则在文档流中分配<length>：用长度值来定义距离顶部的偏移量。可以为负值。<percentage>：用百分比来定义距离顶部的偏移量。百分比参照包含块的高度。可以为负值。

说明：

检索或设置对象参照相对物顶边界向下偏移位置。
该属性用来指定盒子参照相对物顶边界向下偏移。相对定位元素的相对物是自身，绝对定位和居中定位元素是从包含块的padding边界开始计算偏移值
对应的脚本特性为top。

兼容性：

浅绿 = 支持
红色 = 不支持
粉色 = 部分支持

Values	IE	Firefox	Chrome	Safari	Opera	iOS Safari	Android Browser	Android Chrome
Basic Support	6.0+	2.0+	4.0+	6.0+	15.0+	6.0+	2.1+	18.0+

在IE6及以前的版本下，如果

top

和

bottom

都定义了

非auto

的值，那么 bottom 的计算值将会被设置为 -top （无论是否显式的定义了 height 或 max-height），它的指定值将被忽略，说白了，你将无法在不指定某个元素高度的情况，通过给元素指定

top

和

bottom

的方式来进行高度拉伸；

right

语法：

right：auto | <length> | <percentage>

默认值：auto

适用于：定位元素。即定义了 <' position '> 为「非static」的元素

继承性：无

动画性：当值为<length> | <percentage>时

计算值：当position为

static

时，计算值是

auto

。

为

relative

时，如果

right

和

left

都是

auto

，则它们的计算值是

0

；如果

right

和

left

其中一个为

auto

，则

auto

相当于另一个的负值，即left
= -right；如果

right

和

left

的值都不为

auto

，则忽略

right

。

否则在其它情况下，当指定值为<length>时，计算值为指定值，当指定值为<percentage>时，计算值为计算后的绝对值。除去这些情况，都为auto

媒体：视觉

取值：

auto：无特殊定位，根据HTML定位规则在文档流中分配<length>：用长度值来定义距离右边的偏移量。可以为负值。<percentage>：用百分比来定义距离右边的偏移量。百分比参照包含块的宽度。可以为负值。

说明：

检索或设置对象参照相对物右边界向左偏移位置。
该属性用来指定盒子参照相对物右边界向左偏移。相对定位元素的相对物是自身，绝对定位和居中定位元素是从包含块的padding边界开始计算偏移值
对应的脚本特性为right。

兼容性：

浅绿 = 支持
红色 = 不支持
粉色 = 部分支持

Values	IE	Firefox	Chrome	Safari	Opera	iOS Safari	Android Browser	Android Chrome
Basic Support	6.0+	2.0+	4.0+	6.0+	15.0+	6.0+	2.1+	18.0+

在IE6及以前的版本下，如果

right

和

left

都定义了

非auto

的值，那么 right 的计算值将会被设置为 -left （无论是否显式的定义了 width 或 max-width），它的指定值将被忽略，说白了，你将无法在不指定某个元素宽度的情况，通过给元素指定

right

和

left

的方式来进行宽度拉伸；

bottom

语法：

bottom: auto | <length> | <percentage>

默认值：auto

适用于：定位元素。即定义了 <' position '> 为「非static」的元素

继承性：无

动画性：当值为<length> | <percentage>时

计算值：当position为

static

时，计算值是

auto

。

为

relative

时，如果

top

和

bottom

都是

auto

，则它们的计算值是

0

；如果

top

和

bottom

其中一个为

auto

，则

auto

相当于另一个的负值，即top
= -bottom；如果

top

和

bottom

的值都不为

auto

，则忽略

bottom

。

否则在其它情况下，当指定值为<length>时，计算值为指定值，当指定值为<percentage>时，计算值为计算后的绝对值。除去这些情况，都为auto

媒体：视觉

取值：

auto：无特殊定位，根据HTML定位规则在文档流中分配<length>：用长度值来定义距离底部的偏移量。可以为负值。<percentage>：用百分比来定义距离底部的偏移量。百分比参照包含块的高度。可以为负值。

说明：

检索或设置对象参照相对物底边界向上偏移位置。
该属性用来指定盒子参照相对物底边界向上偏移。相对定位元素的相对物是自身，绝对定位和居中定位元素是从包含块的padding边界开始计算偏移值
对应的脚本特性为bottom。

兼容性：

浅绿 = 支持
红色 = 不支持
粉色 = 部分支持

Values	IE	Firefox	Chrome	Safari	Opera	iOS Safari	Android Browser	Android Chrome
Basic Support	6.0+	2.0+	4.0+	6.0+	15.0+	6.0+	2.1+	18.0+

在IE6及以前的版本下，如果

top

和

bottom

都定义了

非auto

的值，那么 bottom 的计算值将会被设置为 -top （无论是否显式的定义了 height 或 max-height），它的指定值将被忽略，说白了，你将无法在不指定某个元素高度的情况，通过给元素指定

top

和

bottom

的方式来进行高度拉伸；

left

语法：

left: auto | <length> | <percentage>

默认值：auto

适用于：定位元素。即定义了 <' position '> 为「非static」的元素

继承性：无

动画性：当值为<length> | <percentage>时

计算值：当position为

static

时，计算值是

auto

。

为

relative

时，如果

right

和

left

都是

auto

，则它们的计算值是

0

；如果

right

和

left

其中一个为

auto

，则

auto

相当于另一个的负值，即left
= -right；如果

right

和

left

的值都不为

auto

，则忽略

right

。

否则在其它情况下，当指定值为<length>时，计算值为指定值，当指定值为<percentage>时，计算值为计算后的绝对值。除去这些情况，都为auto

媒体：视觉

取值：

auto：无特殊定位，根据HTML定位规则在文档流中分配<length>：用长度值来定义距离左边的偏移量。可以为负值。<percentage>：用百分比来定义距离左边的偏移量。百分比参照包含块的宽度。可以为负值。

说明：

检索或设置对象参照相对物左边界向右偏移位置。
该属性用来指定盒子参照相对物左边界向右偏移。相对定位元素的相对物是自身，绝对定位和居中定位元素是从包含块的padding边界开始计算偏移值
对应的脚本特性为left。

兼容性：

浅绿 = 支持
红色 = 不支持
粉色 = 部分支持

Values	IE	Firefox	Chrome	Safari	Opera	iOS Safari	Android Browser	Android Chrome
Basic Support	6.0+	2.0+	4.0+	6.0+	15.0+	6.0+	2.1+	18.0+

在IE6及以前的版本下，如果

right

和

left

都定义了

非auto

的值，那么 right 的计算值将会被设置为 -left （无论是否显式的定义了 width 或 max-width），它的指定值将被忽略，说白了，你将无法在不指定某个元素宽度的情况，通过给元素指定

right

和

left

的方式来进行宽度拉伸；

4. clip(CSS3新增属性)

语法：

clip：auto | <shape>

<shape>：rect(<number>|auto <number>|auto <number>|auto <number>|auto)

默认值：auto

适用于：绝对定位元素

继承性：无

动画性：当值为<shape>时

计算值：指定的值

媒体：视觉

取值：

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个像素开始剪切直至最底部，左边不剪切

* CSS3新增属性可能存在描述错误及变更，仅供参考，持续更新

说明：

检索或设置对象的可视区域。区域外的部分是透明的。
这个属性将被废弃，推荐使用 clip-path 代替，在过渡阶段，仍然会存在一段时间。
必须将position的值设为

absolute

或者

fixed

，此属性方可使用。
对应的脚本特性为clip。

兼容性：

浅绿 = 支持
红色 = 不支持
粉色 = 部分支持

Values	IE	Firefox	Chrome	Safari	Opera	iOS Safari	Android Browser	Android Chrome
Basic Support #1	6.0+	2.0+	4.0+	6.0+	15.0+	6.0+	2.1+	18.0+
rect(逗号分隔)	6.0-7.0	2.0+	4.0+	6.0+	15.0+	6.0+	2.1+	18.0+
8.0+

Basic Support包含值：auto | rect(空格分隔)