CSS之页面布局之四（绝对布局）

绝对布局（Absolute Layout）就是指定元素的position属性为absloute，元素被指定为绝对定位后，浏览器会将其从流中删除。

与浮动布局不同（请参照前面的博文《CSS之页面布局之一（浮动布局） 》），浮动布局中浮动起来的元素，只是“半删除”。即对HTML端的块元素来说浮动起来的元素仿佛从流中被删除了。但对HTML端的内联元素来说浮动起来的元素仍旧存在。

绝对布局就不是“半删除”了，而是从HTML流中彻底删除该元素。被删除的元素和原始HTML流中其他元素，处于不同层面，这就产生了分层的概念。

实现方式：CSS端为元素的position属性设成absolute，并指定top，right，width等属性（即告诉浏览器窗口在何处显示该元素）

CSS端为<p id="absoluteLayout">设置position，top，right，width：

#absoluteLayout {position: absolute;  //绝对定位top: 100px;right: 200px;width: 280px;}

如上图中，黄色框的<p>元素，与其他元素处于不同的层面上。页面可以有多个分层，每个分层都有个z-index属性，值越大越靠近你通过z-index来控制显示哪个层。因此如果想隐藏绝对定位的元素，只需要将该元素的z-index设为负数即可。

绝对定位的元素很可能会覆盖不想被覆盖的区域。而此时你无法像浮动布局（请参照前面的博文《CSS之页面布局之一（浮动布局） 》）那样指定clear属性，因为流中元素完全不知道绝对定位元素的存在。

absolute导致分层后，那该元素显示的位置该如何确定呢？即该元素该依据哪个定位点来定位？分两种情况：

1.该元素的parent元素也设置了position的ababsolute或relative，那该元素的定位点就是其parent元素左上角（准确地说是parent元素的padding的左上角，非margin的左上角）

2.除情况1外，该元素的定位点就是浏览器窗口左上角（即body的左上角），此时效果和设成fixed是相同的。因此fixed可以认为是一种特殊的absolute

PS：

position除了absolute还有：

position:static默认值，元素默认都是static，即元素在正常的流中

position:fixed是固定定位，相对于浏览器窗口进行定位，一旦用固定定位它就永远留在了该位置，即使鼠标滚动，它也原地不动。你可以这样理解：fixed是特殊的absolute，即fixed总是以body为定位对象的。

position:relative与绝对定位类似，只是它仍旧在页面流中（还在它本来的位置上），然后根据你指定的top，left，right，bottom来相对于其本来应该处于的位置进行偏移。