CSS网页布局：关于定位（position）

</ul>
</li>
<li>属性</li>
<li>值</li>
</ul>
</ul>
</body>
</html>
此文档对应的树型结构，如图2所示。

CSS大部分能力是基于元素的“父子”关系，在图2的家族树中，每个元素都是另一个元素的“父”或者“子”或者两者都是。例如：body既是html的子元素，又是h1的父元素，而html就是h1的祖先，h1则是html的子孙。
Body是所有浏览器能显示的元素的祖先，而html是所有元素的祖先，也称为“根元素”。
那为什么定位了的元素还总是以浏览器窗口的左上角为坐标呢？
因为并不是每个元素都能为其后辈元素生成一个包含块。
建立包含块的规则如下：

“根元素”的包含块（也叫初始包含块）由用户代理生成，在HTML中，根元素是HTML元素，尽管有的浏览器会不正确地使用body元素。 对于那些未绝对定位的非根元素来说，元素的包含块设置为最近的块级祖先元素的内容区边沿。 对那些使用绝对（absolute）作为定位（postition）的非根元素，包含块设为最近的定位（postition）不是静止（static）的祖先元素（任何类型）。有以下几种情况：

如果祖先元素是块级（block）元素，包含块设为祖先元素的填充（padding）边沿，也就是被边框（border）约束的区域。 如果祖先元素是内联（inline）元素，包含块设为祖先元素的内容边沿。

关于包含块，最重要的是要记住它为所有后辈元素建立了一个格式编排的上下文。另一个重要方面是，元素可定位于它们的包含块之外。
因此，绝对定位的元素往往以浏览器可视区域的左上为坐标原点来进行定位了。
在CSS中可是使用position属性来在不同的定位类型中选择。
语法：
position : static | absolute | fixed | relative | inherit
其各参数含义是：