CSS常用属性-定位(Positioning)

左手的ㄟ右手 2022-06-06 06:00 243阅读 0赞

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

## 1.position ##

## 语法： ##

**默认值**：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：

对象在常态时遵循常规流。它就像是`relative`和`fixed`的合体，当在屏幕中时按常规流排版，当卷动到屏幕外时则表现如`fixed`。该属性的表现是现实中你见到的吸附效果。（CSS3）

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

## 说明： ##

**检索对象的定位方式。**

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

## 兼容性： ##

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

<table style="color:rgb(102,102,102); border-collapse:collapse; border-spacing:0px; table-layout:auto"> 
 <thead> 
 <tr> 
 <th style="margin:0px; padding:6px 10px; text-align:left; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> Values</th> 
 <th style="margin:0px; padding:6px 10px; text-align:left; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> IE</th> 
 <th style="margin:0px; padding:6px 10px; text-align:left; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> Firefox</th> 
 <th style="margin:0px; padding:6px 10px; text-align:left; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> Chrome</th> 
 <th style="margin:0px; padding:6px 10px; text-align:left; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> Safari</th> 
 <th style="margin:0px; padding:6px 10px; text-align:left; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> Opera</th> 
 <th style="margin:0px; padding:6px 10px; text-align:left; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> iOS Safari</th> 
 <th style="margin:0px; padding:6px 10px; text-align:left; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> Android Browser</th> 
 <th style="margin:0px; padding:6px 10px; text-align:left; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> Android Chrome</th> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide"> Basic Support</td> 
 <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> 6.0+<a href="http://www.css88.com/book/css/properties/positioning/position.htm#support1" style="color:rgb(0,128,0)" rel="nofollow">#1</a></td> 
 <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> 2.0+<a href="http://www.css88.com/book/css/properties/positioning/position.htm#support2" style="color:rgb(0,128,0)" rel="nofollow">#2</a></td> 
 <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> 4.0+</td> 
 <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> 6.0+</td> 
 <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> 15.0+</td> 
 <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> 6.0+</td> 
 <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> 2.1+</td> 
 <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> 18.0+</td> 
 </tr> 
 <tr> 
 <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide"> fixed</td> 
 <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(255,144,144)"> 6.0</td> 
 <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> 2.0+</td> 
 <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> 4.0+</td> 
 <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> 6.0+</td> 
 <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> 15.0+</td> 
 <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> 6.0+</td> 
 <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(255,221,221)"> 2.1-2.3<a href="http://www.css88.com/book/css/properties/positioning/position.htm#support3" style="color:rgb(0,128,0)" rel="nofollow">#3</a></td> 
 <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> 18.0+</td> 
 </tr> 
 <tr> 
 <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> 7.0+</td> 
 <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> 3.0+</td> 
 </tr> 
 <tr> 
 <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide"> center&nbsp;|&nbsp;page</td> 
 <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(255,144,144)"> 6.0-11.0</td> 
 <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(255,144,144)"> 2.0-42.0</td> 
 <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(255,144,144)"> 4.0-47.0</td> 
 <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(255,144,144)"> 6.0-9.0</td> 
 <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(255,144,144)"> 15.0-32.0</td> 
 <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(255,144,144)"> 6.0-9.0</td> 
 <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(255,144,144)"> 2.1-4.4.4</td> 
 <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(255,144,144)"> 18.0-42.0</td> 
 </tr> 
 <tr> 
 <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide"> sticky</td> 
 <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(255,144,144)"> 6.0-11.0</td> 
 <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(255,144,144)"> 2.0-31.0</td> 
 <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(255,144,144)"> 4.0-47.0</td> 
 <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(255,144,144)"> 6.0</td> 
 <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(255,144,144)"> 15.0-32.0</td> 
 <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> 6.0-9.0-webkit-</td> 
 <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(255,144,144)"> 2.1-4.4.4</td> 
 <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(255,144,144)"> 18.0-42.0</td> 
 </tr> 
 <tr> 
 <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> 32.0+</td> 
 <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> 6.1-9.0-webkit-</td> 
 </tr> 
 </tbody> 
</table>

1. IE如果在 [quirks mode][]下将不支持；
2. Firefox30.0开始支持 `tr`, `thead`, `tfoot`, `tbody` 定义 `relative`，Firefox30.0之前的版本及其它浏览器都只能给 `table` 定义 `relative` 用以约束内部元素的定位；
3. 需要定义了
 
 <meta name="viewport" content="width=device-width, user-scalable=no">
 
 才生效

## 2. z-index ##

## 语法： ##

**z-index**: auto | [<integer>][integer]

**默认值**：auto

**适用于**：定位元素。即定义了[position][CSS]为`非static`的元素

**继承性**：无

**动画性**：当值为[<integer>][integer]时

**计算值**：指定的值

**媒体**：视觉

## 取值： ##

auto：

元素在当前层叠上下文中的层叠级别是0。元素不会创建新的局部层叠上下文，除非它是根元素。

[<integer>][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">asdas</div><div class="test2">asdas</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下与高级浏览器下的区别][z-index_IE6_7]
 * 对应的脚本特性为**zIndex**。

## 兼容性： ##

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

<table style="border-collapse:collapse; border-spacing:0px; table-layout:auto"> 
 <thead> 
 <tr> 
 <th style="margin:0px; padding:6px 10px; text-align:left; font-size:13px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> Values</th> 
 <th style="margin:0px; padding:6px 10px; text-align:left; font-size:13px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> IE</th> 
 <th style="margin:0px; padding:6px 10px; text-align:left; font-size:13px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> Firefox</th> 
 <th style="margin:0px; padding:6px 10px; text-align:left; font-size:13px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> Chrome</th> 
 <th style="margin:0px; padding:6px 10px; text-align:left; font-size:13px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> Safari</th> 
 <th style="margin:0px; padding:6px 10px; text-align:left; font-size:13px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> Opera</th> 
 <th style="margin:0px; padding:6px 10px; text-align:left; font-size:13px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> iOS Safari</th> 
 <th style="margin:0px; padding:6px 10px; text-align:left; font-size:13px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> Android Browser</th> 
 <th style="margin:0px; padding:6px 10px; text-align:left; font-size:13px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> Android Chrome</th> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide"> Basic Support</td> 
 <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> 6.0+</td> 
 <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> 2.0+</td> 
 <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> 4.0+</td> 
 <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> 6.0+</td> 
 <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> 15.0+</td> 
 <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> 6.0+</td> 
 <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> 2.1+</td> 
 <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> 18.0+</td> 
 </tr> 
 <tr> 
 <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide"> 负值&nbsp;<a href="http://www.css88.com/book/css/properties/positioning/z-index.htm#support1" style="color:rgb(0,128,0)" rel="nofollow">#1</a></td> 
 <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> 6.0+</td> 
 <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(255,144,144)"> 1.0-2.0</td> 
 <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> 4.0+</td> 
 <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> 6.0+</td> 
 <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> 15.0+</td> 
 <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> 6.0+</td> 
 <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> 2.1+</td> 
 <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> 18.0+</td> 
 </tr> 
 <tr> 
 <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> 3.0+</td> 
 </tr> 
 </tbody> 
</table>

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

## 3. top、right、bottom、left ##

### top ###

## 语法： ##

**top**: auto | [<length>][length] | [<percentage>][percentage]

**默认值**：auto

**适用于**：定位元素。即定义了[position][CSS]为`非static`的元素

**继承性**：无

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

**计算值**：当[position][CSS]为`static`时，计算值是`auto`。 
为`relative`时，如果`top`和`bottom`都是`auto`，则它们的计算值是`0`；如果`top`和`bottom`其中一个为`auto`，则`auto`相当于另一个的负值，即top = -bottom；如果`top`和`bottom`的值都不为`auto`，则忽略`bottom`。 
否则在其它情况下，当指定值为[<length>][length]时，计算值为指定值，当指定值为[<percentage>][percentage]时，计算值为计算后的绝对值。除去这些情况，都为auto

**媒体**：视觉

## 取值： ##

auto：

无特殊定位，根据HTML定位规则在文档流中分配

[<length>][length]：

用长度值来定义距离顶部的偏移量。可以为负值。

[<percentage>][percentage]：

用百分比来定义距离顶部的偏移量。百分比参照包含块的高度。可以为负值。

## 说明： ##

**检索或设置对象参照相对物顶边界向下偏移位置。**

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

## 兼容性： ##

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

1.  在IE6及以前的版本下，如果`top`和`bottom`都定义了`非auto`的值，那么 bottom 的计算值将会被设置为 -top （无论是否显式的定义了 [height][] 或 [max-height][]），它的指定值将被忽略，说白了，你将无法在不指定某个元素高度的情况，通过给元素指定`top`和`bottom`的方式来进行高度拉伸；

### right ###

## 语法： ##

**right**：auto | [<length>][length] | [<percentage>][percentage]

**默认值**：auto

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

**继承性**：无

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

**计算值**：当[position][CSS]为`static`时，计算值是`auto`。 
为`relative`时，如果`right`和`left`都是`auto`，则它们的计算值是`0`；如果`right`和`left`其中一个为`auto`，则`auto`相当于另一个的负值，即left = -right；如果`right`和`left`的值都不为`auto`，则忽略`right`。 
否则在其它情况下，当指定值为[<length>][length]时，计算值为指定值，当指定值为[<percentage>][percentage]时，计算值为计算后的绝对值。除去这些情况，都为auto

**媒体**：视觉

## 取值： ##

auto：

无特殊定位，根据HTML定位规则在文档流中分配

[<length>][length]：

用长度值来定义距离右边的偏移量。可以为负值。

[<percentage>][percentage]：

用百分比来定义距离右边的偏移量。百分比参照包含块的宽度。可以为负值。

## 说明： ##

**检索或设置对象参照相对物右边界向左偏移位置。**

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

## 兼容性： ##

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

1.  在IE6及以前的版本下，如果`right`和`left`都定义了`非auto`的值，那么 right 的计算值将会被设置为 -left （无论是否显式的定义了 [width][] 或 [max-width][]），它的指定值将被忽略，说白了，你将无法在不指定某个元素宽度的情况，通过给元素指定`right`和`left`的方式来进行宽度拉伸；

### bottom ###

## 语法： ##

**bottom**: auto | [<length>][length] | [<percentage>][percentage]

**默认值**：auto

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

**继承性**：无

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

**媒体**：视觉

## 取值： ##

auto：

无特殊定位，根据HTML定位规则在文档流中分配

[<length>][length]：

用长度值来定义距离底部的偏移量。可以为负值。

[<percentage>][percentage]：

用百分比来定义距离底部的偏移量。百分比参照包含块的高度。可以为负值。

## 说明： ##

**检索或设置对象参照相对物底边界向上偏移位置。**

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

## 兼容性： ##

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

### left ###

## 语法： ##

**left**: auto | [<length>][length] | [<percentage>][percentage]

**默认值**：auto

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

**继承性**：无

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

**媒体**：视觉

## 取值： ##

auto：

无特殊定位，根据HTML定位规则在文档流中分配

[<length>][length]：

用长度值来定义距离左边的偏移量。可以为负值。

[<percentage>][percentage]：

用百分比来定义距离左边的偏移量。百分比参照包含块的宽度。可以为负值。

## 说明： ##

**检索或设置对象参照相对物左边界向右偏移位置。**

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

## 兼容性： ##

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

## 4. clip(CSS3新增属性) ##

## 语法： ##

**clip**：auto | [<shape>][shape]

**<shape>**：rect([<number>][number]|auto [<number>][number]|auto [<number>][number]|auto [<number>][number]|auto)

**默认值**：auto

**适用于**：绝对定位元素

**继承性**：无

**动画性**：当值为[<shape>][shape 1]时

**计算值**：指定的值

**媒体**：视觉

## 取值： ##

auto：

对象无剪切

rect([<number>][number]|auto [<number>][number]|auto [<number>][number]|auto [<number>][number]|auto)：

依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值，其中任一数值都可用auto替换，即此边不剪切。

上-左 方位的裁剪：从0开始剪裁直到设定值，即 上-左 方位的auto值等同于0；

右-下 方位的裁剪：从设定值开始剪裁直到最右边和最下边，即 右-下 方位的auto值为盒子的实际宽度和高度；

示例：clip:rect(auto 50px 20px auto)

说明：上边不剪切，右边从左起第50个像素开始剪切直至最右边，下边从上起第20个像素开始剪切直至最底部，左边不剪切

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

## 说明： ##

**检索或设置对象的可视区域。区域外的部分是透明的。**

*  这个属性将被废弃，推荐使用 [clip-path][] 代替，在过渡阶段，仍然会存在一段时间。
 *  必须将[position][CSS]的值设为`absolute`或者`fixed`，此属性方可使用。
 *  对应的脚本特性为**clip**。

## 兼容性： ##

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

<table style="border-collapse:collapse; border-spacing:0px; table-layout:auto"> 
 <thead> 
 <tr> 
 <th style="margin:0px; padding:6px 10px; text-align:left; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> Values</th> 
 <th style="margin:0px; padding:6px 10px; text-align:left; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> IE</th> 
 <th style="margin:0px; padding:6px 10px; text-align:left; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> Firefox</th> 
 <th style="margin:0px; padding:6px 10px; text-align:left; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> Chrome</th> 
 <th style="margin:0px; padding:6px 10px; text-align:left; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> Safari</th> 
 <th style="margin:0px; padding:6px 10px; text-align:left; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> Opera</th> 
 <th style="margin:0px; padding:6px 10px; text-align:left; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> iOS Safari</th> 
 <th style="margin:0px; padding:6px 10px; text-align:left; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> Android Browser</th> 
 <th style="margin:0px; padding:6px 10px; text-align:left; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> Android Chrome</th> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide"> Basic Support&nbsp;<a href="http://www.css88.com/book/css/properties/positioning/clip.htm#support1" style="color:rgb(0,128,0)" rel="nofollow">#1</a></td> 
 <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> 6.0+</td> 
 <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> 2.0+</td> 
 <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> 4.0+</td> 
 <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> 6.0+</td> 
 <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> 15.0+</td> 
 <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> 6.0+</td> 
 <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> 2.1+</td> 
 <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> 18.0+</td> 
 </tr> 
 <tr> 
 <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide"> rect(逗号分隔)</td> 
 <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(255,144,144)"> 6.0-7.0</td> 
 <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> 2.0+</td> 
 <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> 4.0+</td> 
 <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> 6.0+</td> 
 <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> 15.0+</td> 
 <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> 6.0+</td> 
 <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> 2.1+</td> 
 <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> 18.0+</td> 
 </tr> 
 <tr> 
 <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> 8.0+</td> 
 </tr> 
 </tbody> 
</table>

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

[CSS]: http://www.css88.com/book/css/properties/positioning/position.htm
[display]: http://www.css88.com/book/css/properties/layout/display.htm
[top]: http://www.css88.com/book/css/properties/positioning/top.htm
[right]: http://www.css88.com/book/css/properties/positioning/right.htm
[bottom]: http://www.css88.com/book/css/properties/positioning/bottom.htm
[left]: http://www.css88.com/book/css/properties/positioning/left.htm
[z-index]: http://www.css88.com/book/css/properties/positioning/z-index.htm
[demo]: http://demo.doyoe.com/css/auto-list/absolute-flow.htm
[quirks mode]: http://msdn.microsoft.com/en-us/library/ie/ms531140%28v=vs.85%29.aspx
[integer]: http://www.css88.com/book/css/values/numeric/integer.htm
[z-index_IE6_7]: http://demo.doyoe.com/css/z-index/create-stacking-context.htm
[length]: http://www.css88.com/book/css/values/length/length.htm
[percentage]: http://www.css88.com/book/css/values/numeric/percentage.htm
[height]: http://www.css88.com/book/css/properties/dimension/height.htm
[max-height]: http://www.css88.com/book/css/properties/dimension/max-height.htm
[width]: http://www.css88.com/book/css/properties/dimension/width.htm
[max-width]: http://www.css88.com/book/css/properties/dimension/max-width.htm
[shape]: http://www.css88.com/book/css/properties/positioning/clip.htm#shape
[number]: http://www.css88.com/book/css/values/numeric/number.htm
[shape 1]: http://www.css88.com/book/css/properties/positioning/clip.htm#dfn-syntax
[clip-path]: http://www.w3.org/TR/css-masking/#the-clip-path