未完待续......最近在读《CSS secrets》, 看完再来补充……
position
CSS的position属性用于指定元素的定位类型。默认值: static
4个可能的值:
static
元素按常规文档流（从左到右 从上到下）定位；
静态定位的元素不能使用 top, right, bottom 和 left 属性进行定位。
absolute
元素脱离文档流；
元素相对于它包含的元素进行定位，相对于所有其他元素，绝对定位的元素是独立定位的。
它的定位要么相对于最近的祖先元素，要么相对于文档本身。
fixed
元素脱离文档流，相对于浏览器窗口进行定位；
与其他所有元素独立；
大多数浏览器支持，IE6 除外（大概也没有公司要求必须支持 IE6 了=。=）。
relative
元素按照常规文档流布局，它的定位相对于他文档流中的位置进行调整；
系统保留元素在正常文档流中的空间，不会因为要填充空间而将其个边合拢，也不会将元素从新的位置“推开”。
一些实例
position 的值为 static 以外的值的元素，可通过设置元素 top 和 left 属性指定其左边缘到容器（通常是文档本身）左边缘的距离和其上边缘到容器上边缘的距离。
例如，定位一个距离文档左、上边缘分别是 100px 的 div 元素，可以指定如下样式：
<style>
div{
position:absolute;
top:100px;
left:100px;
}
</style>如果一个元素使用绝对定位，它的 top 和 left 属性是它相对于 position 属性设置为出 static 以外的祖先元素的上、左边缘的距离。如果它没有设置过除 static 以外的祖先，则使用文档边缘进行定位。
<!-- html -->
<body>
<div id="div1" class="lev1">
<div id="div1-1" class="lev2">div1-1</div>
</div>
<div id="div2" class="lev1">
<div id="div2-1" class="lev2">div2-1</div>
</div>
<div id="div3" class="lev1"></div>
</body><!-- css -->
<style>
body {
background-color: #eee;
color: #333;
}
.lev1{
width:200px;
height:200px;
background-color:yellowgreen;
border:1px solid #eee;
margin-top:20px;
margin-left:20px;
}
#div1{
}
#div2{
position:relative;
}
#div3{
background-color:purple;
}
.lev2{
position:absolute;
width:50px;
height:50px;
left:0;
top:10px;
background-color:red;
}
</style>效果如下：
任何绝对定位的子元素都相对于容器进行定位。
使用 top 和 left 定位元素的左上角位置是常见的定位方法，也可以使用 right 和 bottom 对指定元素相对于容器的右、下边缘进行定位。
除了指定元素 width 来确定元素宽度，还可用过指定 left 和 right 的方式（同样，也可通过指定 top 和 bottom 来指定元素的高度）。 同时指定时，width 优先级高于 right/left, height 优先级高于 bottom/top; left 优先级高于 right, top 优先级高于bottom.
没必要给每一个动态元素指定尺寸。某些元素（如图片）具有固定尺寸。对于包含文本或其他流式内容的动态元素通常指定宽度就足够了，让布局决定它的高度。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。