css+div布局要素：文档流position属性 父级对象和同级对象

div+css布局要素：文档流position属性、父级对象和同级对象。从学div+css以来，一直对position几个属性的理解不够清晰。自己对position这一属性有了更深入和清晰的认识，同时让自己对整个div+css布局有了更深入的认识。

因为div实质是一个四方块，被很多业界人士形象的比喻成盒子。那么div+css布局的过程其实就是摆放这些盒子的过程。最近一周来，专门针对这个问题进行了深入的思考和研究。结果通过对这一问题的研究不仅让自己对position这一属性有了更深入和清晰的认识，同时让自己对整个div+css布局有了更深入的认识。

因为div实质是一个四方块，被很多业界人士形象的比喻成盒子。那么div+css布局的过程其实就是摆放这些盒子的过程。

而我觉得控制或者说影响这些盒子的摆放的因素主要有一下几个属性：position、float、clear、margin、left、top、right、bottom、z-index；另外还要深入理解并确定好“父级对象”及“同级对象”，还有要很好的理解并想象出“文档流”的概念。下面根据自己的理解对以上元素的作用和彼此间的联系做详细的解释说明。

1、       什么是“文档流”？

关于“文档流”有位网友这样解释：将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素。我能理解这位网友的意思，其实他的理解和我是一样的，只是他有一点小的失误，就是他把“文档流”定义成一种“行为”了――如何摆放元素。但很明显，“文档流”是个名词，实质上它指“通过这种行为而产生的一个实体，即展现在浏览者眼前的页面。”

那么，我们经常看到“正常文档流”和“脱离正常文档流”的字样。我想要想很清晰的理解这个问题，要从理解“div+css布局”与“table布局”的一个和大的不同说起。从我的理解而言，table布局是一个二维空间的布局（即一个平面上的布局）；而“div+css布局”是个三维空间的布局（即一个空间上的布局）。

那么“div+css”是如何将平面转换为空间的呢？这要归功于以下五个属性：left、right、top、bottom、z-index，可以将right（left）、top（bottom）、z-index（正负值）想象成三维坐标轴中的x、y、z轴。“正常文档流”可以想象成x、y平面。“脱离正常文档流”就是跳出了x、y平面，独立开辟新的层面。

2、       何为“父级对象”“同级对象”？

如果说要找块div1的父级对象，那么简单的说就是谁直接包含了div1，谁就是他的父级对象。同级对象，是指具有同一父级对象的两个或两个以上的对象。例如：

<div id=”out”>
  <div id=”in1”>
    <div id=”in2”></div>
    <div id=”in3”></div>
  </div>
</div>

其中in1的父级对象是out，而in2、和in3的父级对象是in1，不是out。in2和in3为同级对象。

3、       float和clear属性详解及关联？

很多网友认为，被定义float（属性值不为none时）的对象，脱离了正常的稳定流。当然，我也同意被定义这一属性的对象，其位置不再遵循正常文档流中的默认值，而是被重新定义了。但是，我还是觉得这样的对象并没有脱离原来的文档流，因为它依然处于原来的平面（原来的文档流）之内，只是他位置被重新定义，强制改变了，但对象与对象之间还是不能重叠的。而float和clear便是影响这一改变的属性。

其中float有两个作用。一是重新定义当前对象的浮动方式――向左或向右，二是定义在其之后文档流的跟随方式――跟随在当前对象的右边或左边。Float：left指当前对象向左移动，其后文档流跟随在他的右侧。反之float：right指当前对象向右移动，其后文档流跟随在他的左侧。

 而Clear：用以清除当前对象两边的浮动对象（即被定义了float：left或float：right的对象。），这里的浮动对象是针对当前对象之前的浮动对象。

 

注：float和clear之间的影响和清除作用只适用于处在同一文档流中的对象。

4、       position属性详解。

position 属性把元素放置到一个静态的、相对的、绝对的、或固定的位置中。

static： 默认。位置设置为 static 的元素，它始终会处于页面流给予的位置（static 元素会忽略任何 top、bottom、left 或 right 声明）。

relative： 位置被设置为 relative 的元素，可将其移至相对于其正常位置的地方，因此 “left:20″ 将向元素的 LEFT 位置添加 20 个像素。

absolute： 位置设置为 absolute 的元素，可定位于相对于包含它的元素的指定坐标。此元素的位置可通过 “left”、”top”、”right” 以及”bottom” 属性来规定。

fixed： 位置被设置为 fixed 的元素，可定位于相对于浏览器窗口的指定坐标。此元素的位置可通过 “left”、”top”、”right” 以及”bottom” 属性来规定。不论窗口滚动与否，元素都会留在那个位置。工作于 IE7（strict 模式）。

补充说明：

Relative：相对父级相对定位，不可重叠。因为此时当前对象依然处在正常文档流中（当position定义为static的时候也一样），所以float和clear属性依然对其有作用。

Absolute:相对父级绝对定位，可以重叠。脱离正常文档流，开辟新的层面。所以float和clear属性对其已经失去意义。

Position被定义为以上四种值的对象之间，可以根据不同的需求，相互包含。