定位方案

三种定位方案及其优先级

css2.1中，一个盒可能会根据三种定位方案来布局：

根据实验，三种定位方案的优先级为：绝对定位>浮动>常规流。比如一个元素中同时出现了position:absolute和float:left（不管在css类中出现的顺序如何），那么这个元素会被认为是position:absolute，而忽略float:left，

如果一个元素是浮动的、绝对定位的或者是根元素，它就叫流外（out of flow）元素。如果一个元素不是流外的，就叫流内（in-flow）元素。

（流外）元素A的流是由A和所有最近的流外祖先（这里的“流外”是个定语，即这个祖先必须是“最近的”且是“流外的”）为A的流内元素组成的集合。

换句话说，流内元素的流只包含该元素自己，流外元素的流包含自身及所有的后代元素（除了被包进其他流外元素的）。

position和float属性决定了用哪种CSS2.1定位算法来计算盒的位置。

position属性值的含义如下：

static：盒是一个常规盒，根据常规流布局。top、right、bottom、left属性失效。
relative：盒的位置根据常规流计算，然后盒相对于其常规位置偏移。当盒B为相对定位时，后面的位置按照B没有偏移量来计算。display取值前缀为table-的元素上使用position: relative的效果是未定义的。
absolute：盒位置由top、right、bottom、left属性指定，这些属性指定了相对包含块的偏移量。绝对定位的盒脱离了常规流，意味着它们不会影响后面兄弟元素的布局。
fixed：除了盒相对于某些参照是固定的之外，盒的位置根据absolute模型来计算。

top、right、bottom、left这四个属性的值含义如下：

<length>：固定偏移。
<percentage>：包含块宽度（对于left和right）和高度（对于top和bottom）的百分比值。
auto：对于非替换元素，该值的效果取决于哪些相关的元素的值也是auto的数学。非替换元素的详细情况，见“绝对定位的width和height章节”。对于替换元素，该值的影响只取决于替换内容的固有尺寸，见“绝对定位的width和height章节”。

（也就是说，浮动和绝对定位时，display会重新计算）

Specified value	Computed value
inline-table	table
inline, inline-block, table-row-group, table-row, table-column-group, table-column, table-caption, table-header-group, table-footer-group, table-cell	block
其他	与指定值相同
list-item	应该变成list-tiem或是block在css2.1中未定义