标签：
在这个系列第一章里可视化格式模型里就说到过，影响框的布局的几个因素：
1.框的尺寸和类型
2.定位体系
3.文档树中元素间的关系
4.外部信息
其中，我觉得在实际工作中处理最多的还要属定位体系的问题。定位体系，主要分三种，常规流（normal flow）、浮动（floats）、绝对定位（absolute positioning），这一节将大致的描述一下这三种定位体系，有一个大概的印象，知道到底是什么，然后后面的章节会一个一个具体的分析。
从直观上理解，常规流指的是html中的元素，按照它们在html中的位置顺序，决定它们排布的过程，自上而下，从左至右。同时，也因为是流，所以位置是可变的。常规其实是一个相对的概念，是相对脱离了常规流的float元素和absolute元素来说的。
在css2.1中，常规流包括块框（block boxes）的块格式化（block formatting）,行内框（inline boxes）的行内格式化（inline formatting），块框或行内框的相对定位，以及插入框的定位。
在浮动模型中，一个框首先根据常规流来布局，再将它从流中取出并尽可能地向左或向右偏移。内容可以沿浮动区的侧面排列。 因为它首先要根据常规布局后才偏移，所以效率较常规流低。
在绝对定位模型中，一个框完全的从常规流中脱离，对它后面的兄弟元素完全没有影响，并会根据它的包含块来定位。
绝对定位元素有一个很有意思的事情，如果你不设置absolute元素的top、left、right、bottom，它就会在它在常规流中本来的位置，但是感觉就像虚化了，不会占据任何空间，也不会影响后面的元素。根据这个性质可以做很多事情，会在后面的章节里详细的讲。
一个元素，如果它使float元素、absolute定位了，或者是根元素（html），那么它就被叫做流外的元素（out of flow）。如果一个元素不是流外的元素，那么它被称为流内的元素（in flow）。
元素A的流是一个集合，包含A元素本身，以及元素A的流内的子元素，且这些子元素最近的流外祖先是A元素。
<div class="A" style="position: absolute;"> <div class="B"></div> <div class="C" style="position:absolute"> <div class="D"></div> </div> <div class="E"> <div class="F"></div> </div>
以上的示例中，A元素的流如下：
1.A和C是流外的元素，所以C被排除；
2.D元素由于最近的流外祖先是C，所以也被排除；
3.所以最终A元素流内的元素是：A、B、E、F
position和float属性决定使用哪种定位算法来计算一个框的位置。
position：
| 值 | static/relative/absolute/fixed/inherit |
| 初始值 | static |
| 适用于 | 所有元素 |
| 可否继承 | 否 |
| 百分比值 | N/A |
| 计算值 | 同设定值 |
position属性的值分辨有如下的含义：
上面一个例子运行结果如下：
relative元素a2设置了top属性，从原来的位置移到图片中的位置，但是未影响后面a3元素的位置。
table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption 这些元素运用position：relative无效。
框位置的计算根据‘absolute’模型，但是框需要一些额外的参考来得到固定。和absolute模型一样,fixed框的margin不会和其他的margin产生折叠。用于手持终端、投影设备、屏幕、TTY、电视媒体类型时，框相对于可视窗口固定，滚动时不移动。应用于打印媒介类型时，框被渲染于每一页， 并相对于页框固定，就好象是通过可视窗口查看该页一样（例如，打印预览）。对于其他的媒介类型，表现没有被定义。
对根元素的 ‘position‘，用户端(UA)可以视为 "static"。
如果一个元素的 ‘position‘ 特性值不是 "static"，该元素被称为定位元素。定位的元素生成定位框，其定位基于四个属性：‘top‘，‘right‘，‘bottom‘，‘left‘。
| 值 | length/百分比/inherit/auto |
| 初始值 | value |
| 适用于 | 定位元素 |
| 可否继承 | 否 |
| 百分比值 |
百分比值基于包含块的高度(top, bottom)或者宽度(left, right) |
|
计算值 |
对于 "position:relative" 参见相对定位；对于 "position:static" 取值 "auto"； 其他情况，如果值为长度，取相应的绝对长度，如果标值为百分比，取指定的值，否则，取 "auto"。 |
对于绝对定位的框，这四个特性的值表示，元素的外边界(margin边界)相对于包含块的边界(padding edge)的位移。而对于相对定位的框，偏移量相对于它自己的相应的边界。比如，top是相对于它的顶边界，right相对于右边界。
标签：
原文地址：http://www.cnblogs.com/rexD/p/4543466.html
