关于定位
CSS中的定位（position）属性允许你规定一个元素的位置。
元素可以通过 top, bottom, left, right 属性来定位，然而，如果没有先设定好 position 属性的值的话，这些属性是不会正常工作的。并且随 position 的不同，它们的工作方式也有很大不同。
静态定位（Static Positioning）
默认情况下，HTML元素使用静态定位。一个使用静态定位的元素总是按照页面的正常流（Normal flow）来确定位置。啥叫正常流？简单地说就是：布局方式从左到右，从上到下，块级元素两边不能有其它元素等等。。。
静态定位的元素不受 top, bottom, left, top 属性的影响。
固定定位
使用固定定位的元素将相对于浏览器窗口来定位（如果该元素处于 iframe 中，则应相对于此 iframe 窗口），并且不受窗口滚动的影响。
使用固定定位的元素将会从窗口的正常流中移出。文档和其它元素的表现就如同这些固定定位的元素不存在一样。
固定定位的元素可以重叠在其它元素之上。
注：IE7 和 IE8 仅当在指定了 !DOCTYPE 时才会支持固定定位。
示例：点我查看效果
<html>
<head>
<style type="text/css">
div.fixed {
position: fixed;
width: 100%;
left: 0px;
top: 0px;
/* 省略部分不相关属性 */
}
</style>
</head>
<body>
<div class="fixed">
这个示例展示了固定定位元素的位置将相对于当前的窗口而言。<br>
并且不受滚动的影响。
</div>
</body>
</html>
相对定位
相对定位的元素的最终位置将相对于它的正常位置，其位置可以相对正常位置移动，也可以重叠在其它元素之上。但正常流中为它预留的空间将依然为它保留。
相对定位的元素经常被作为其它使用绝对定位的元素的容器。
观察下面两个例子，前一个未使用相对定位，后一个使用相对定位。
部分使用的代码如下：
<div>
<div style="width: 4em; height: 4em;"></div>
<div style="width: 4em; height: 4em;"></div>
<div style="width: 4em; height: 4em;"></div>
</div>
<div>
<div style="position: relative; left: 0em;"></div>
<div style="position: relative; left: 8em;"></div>
<div style="position: relative; left: 0em;"></div>
</div>
使用相对定位后，“left: 8em;”使得：第2行中绿色的盒子相对于第1行向右2倍宽的距离，但绿色本身的位置还是存在的，所以蓝色的位置还是在第3!
绝对定位
绝对定位的元素的位置相对于其父级元素中第1个拥有非静态定位的元素。如果没有此元素，将相对于 <html>。
和固定定位不同的是，它始终会跟着其父滚动。
重叠元素
处于正常流之外的元素可以和其它元素重叠放置。
z-index 属性指定元素的栈次序，它用于说明该元素应该位于前面，后面，或是其它。其值可正可负。值越大，元素越在布局的最前面。
这篇文章的内容已被作者标记为“过时”/“需要更新”/“不具参考意义”。