[轉]總結一下CSS中的定位 Position 屬性
在CSS中，Position 屬性經常會用到，主要是絕對定位和相對定位，簡單的使用都沒有問題，尤其嵌套起來，就會有些混亂，今記錄總結一下，防止久而忘之。
CSS position 屬性值：
- absolute：生成絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
- relative：生成相對定位的元素，相對於其正常位置進行定位。因此，"left:20" 會向元素的 LEFT 位置添加 20 像素。
- fixed：生成絕對定位的元素，相對於瀏覽器窗口進行定位。
- static：默認值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
- inherit：規定應該從父元素繼承 position 屬性的值。
我們最常用的的就是 absolute 和 relative 兩種方式，所以主要討論著兩者的區別。
relative 相對定位
相對定位我們主要是要知道相對於誰來進行偏移的？其實相對定位是相對於元素自己的本身的位置，我們來看一下例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
html body
{
margin: 0px;
padding: 0px;
}
#parent
{
width: 200px;
height: 200px;
border: solid 5px black;
padding: 0px;
position: relative;
background-color: green;
top: 15px;
left: 15px;
}
#sub1
{
width: 100px;
height: 100px;
background-color: blue;
}
#sub2
{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="parent">
<div id="sub1">
</div>
<div id="sub2">
</div>
</div>
</body>
</html>
這是一個嵌套的DIV，一個父Div Parent， 包含兩個子DIV Sub1 和 Sub2，由於兩個子DIV沒有設置任何Position屬性，它們處於它們應當的位置。默認位置如下圖：
當我們修改一下Div Sub1 的樣式：
#sub1
{
width: 100px;
height: 100px;
background-color: blue;
position: relative;
top: 15px;
left: 15px;
}
結果如下圖：我們會發現Sub1進行了偏移，並不影響Sub2的位置，同時遮蓋住了Sub2，切記偏移並不是相對於 Div Parent的，而是相對於Sub1 原有的位置。
如果我們把Sub1 的同級Div Sub2 也設置一個相對位置，會產生什麽結果？我們來看一下。
#sub2
{
width: 100px;
height: 100px;
background-color: red;
position: relative;
top: 10px;
left: 10px;
}
結果如下圖：
Sub2也根據原有位置進行了偏移，同時遮蓋住了Sub1，也不會影響Sub1的位置。相對定位比較容易理解，我們再來看一下絕對定位Absolute。
absolute 絕對定位
絕對定位在使用當中比較容易出錯的，有幾個需要註意的地方，將上面的代碼還原，我們為Sub1 增加一個絕對定位。
#sub1
{
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
top: 15px;
left: 15px;
}
結果如下：
我們發現，由於我們對Sub1進行了絕對定位，Sub1的位置發生了偏移，而同級Div Sub2，則占據了Sub1的位置，並且Sub1遮擋了Sub2.
下面，把Sub2 也增加絕對定位：
#sub2
{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 10px;
left: 10px;
}
結果如下：
我們會發現，Sub2 也進行了偏移，並且遮蓋住了Sub1。
這時候，我們會發現問題，兩個子Div 都設置了 絕對定位，他們是相對於哪個元素發生了偏移呢？
這分兩種情況：
1、如果Sub1 的父元素或者祖父元素，設置了Position屬性，並且屬性值為 absolute 或 relative的時候，那麽子元素相對於父元素來進行定位。比如我們例子中最外層Div Parent設置了相對定位屬性，因此Sub1 和 Sub2 兩個Div 就根據 Div Parent 來進行定位。但是根據Parent那個定位點進行定位呢？答案是：如果parent設定了margin，border，padding等屬性，那麽這個定位點將忽略padding，將會從padding開始的地方(即只從padding的左上角開始)進行定位。
2、如果sub1不存在一個有著position屬性的父對象，那麽那就會以body為定位對象，按照瀏覽器的窗口進行定位。
我們將例子中的Parent 的Position 屬性刪除，再來看一下結果：
由於兩個子div沒有找到有Position屬性的父元素，則以Body進行定位，由於圖片原因，請不要誤以為是相對於Parent的。
fixed 定位方式
fixed是一種特殊的absolute，fixed總是以body為定位對象的，按照瀏覽器的窗口進行定位。我們將代碼還原到最初狀態，Sub1 增加absolute定位方式，而Sub2 增加fixed定位方式：
#sub1
{
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
top: 15px;
left: 15px;
}
#sub2
{
width: 100px;
height: 100px;
background-color: red;
position: fixed;
top: 5px;
left: 5px;
}
結果如下：
會發現Sub2 始終以body 進行定位，而Sub1由於發現Parent 有position屬性relative，則根據父元素進行定位偏移。
註意fixed 在IE 低版本中式不支持的，包括IE6
至於 static 和 inherit 兩種定位，項目中很少用到，static 就是Position屬性的默認值，一般不設置position屬性時，會按照正常的文檔流進行排列。這裏就不在贅述。
[轉]總結一下CSS中的定位 Position 屬性