我們先來(lái)看看CSS3 Api中對(duì)position屬性的相關(guān)定義：
static：無(wú)特殊定位，對(duì)象遵循正常文檔流。top，right，bottom，left等屬性不會(huì)被應(yīng)用。
relative：對(duì)象遵循正常文檔流，但將依據(jù)top，right，bottom，left等屬性在正常文檔流中偏移位置。而其層疊通過(guò)z-index屬性定義。
absolute：對(duì)象脫離正常文檔流，使用top，right，bottom，left等屬性進(jìn)行絕對(duì)定位。而其層疊通過(guò)z-index屬性定義。
fixed：對(duì)象脫離正常文檔流，使用top，right，bottom，left等屬性以窗口為參考點(diǎn)進(jìn)行定位，當(dāng)出現(xiàn)滾動(dòng)條時(shí)，對(duì)象不會(huì)隨著滾動(dòng)。而其層疊通過(guò)z-index屬性定義。
怎么樣，是不是還是很迷糊~~ 沒(méi)關(guān)系，下面就從幾個(gè)基礎(chǔ)概念一一給大家詳述：
什么是文檔流？
將窗體自上而下分成一行行, 并在每行中按從左至右的順序排放元素,即為文檔流。
只有三種情況會(huì)使得元素脫離文檔流，分別是：浮動(dòng)、絕對(duì)定位和相對(duì)定位。
靜態(tài)定位(static) ：
static，無(wú)特殊定位，它是html元素默認(rèn)的定位方式，即我們不設(shè)定元素的position屬性時(shí)默認(rèn)的position值就是static，它遵循正常的文檔流對(duì)象，對(duì)象占用文檔空間，該定位方式下，top、right、bottom、left、z-index等屬性是無(wú)效的。
相對(duì)定位(relative) ：
relative定位，又稱(chēng)為相對(duì)定位，從字面上來(lái)解析，我們就可以看出該屬性的主要特性：相對(duì)。但是它相對(duì)的又是相對(duì)于什么地方而言的呢？這個(gè)是個(gè)重點(diǎn)，也是最讓我迷糊的一個(gè)地方，現(xiàn)在讓我們來(lái)做個(gè)測(cè)試，我想大家都會(huì)明白的：
(1) 初始未定位
[html] view plain copy
/******初始*********/
<style type="text/css">
#first { width: 200px; height: 100px; border: 1px solid red; }
#second{ width: 200px; height: 100px; border: 1px solid blue;}
</style>
<body>
<div id="first"> first</div>
<div id="second">second</div>
</body>
初始原圖：
(2) 我們修改first元素的position屬性：
[html] view plain copy
<style type="text/css">
#first{ width: 200px; height: 100px; border: 1px solid red; position: relative; top: 20px; left: 20px;} /add position/
#second{width: 200px; height: 100px; border: 1px solid blue;}
</style>
相對(duì)偏移20px后：
現(xiàn)在看明白了吧，相對(duì)定位相對(duì)的是它原本在文檔流中的位置而進(jìn)行的偏移，而我們也知道relative定位也是遵循正常的文檔流，它沒(méi)有脫離文檔流，但是它的top/left/right/bottom屬性是生效的，可以說(shuō)它是static到absoult的一個(gè)中間過(guò)渡屬性，最重要的是它還占有文檔空間，而且占據(jù)的文檔空間不會(huì)隨 top / right / left / bottom 等屬性的偏移而發(fā)生變動(dòng)，也就是說(shuō)它后面的元素是依據(jù)虛線位置( top / left / right / bottom 等屬性生效之前)進(jìn)行的定位，這點(diǎn)一定要理解。
那好，我們知道了top / right / left / bottom 屬性是不會(huì)對(duì)relative定位的元素所占據(jù)的文檔空間產(chǎn)生偏移，那么margin / padding會(huì)讓該文檔空間產(chǎn)生偏移嗎？答案是肯定的，我們一起來(lái)做個(gè)試驗(yàn)吧：
(3) 添加margin屬性：
[html] view plain copy
<style type="text/css">
#first{width: 200px;height: 100px;border: 1px solid red;position: relative;top: 20px;left: 20px;margin: 20px;} /* add margin*/
#second{width: 200px;height:100px;border: 1px solid blue;}
</style>
對(duì)比一下，是不是就很清晰了，我們先將first元素外邊距設(shè)為20px，那么second元素就得向下偏移40px，所以margin是占據(jù)文檔空間！同理，大家可以自己動(dòng)手測(cè)下padding的效果吧！
絕對(duì)定位(absoulte) ：
absoulte定位，也稱(chēng)為絕對(duì)定位，雖然它的名字號(hào)曰“絕對(duì)”，但是它的功能卻更接近于"相對(duì)"一詞，為什么這么講呢？原來(lái)，使用absoult定位的元素脫離文檔流后，就只能根據(jù)祖先類(lèi)元素(父類(lèi)以上)進(jìn)行定位，而這個(gè)祖先類(lèi)還必須是以postion非static方式定位的， 舉個(gè)例子，a元素使用absoulte定位，它會(huì)從父類(lèi)開(kāi)始找起，尋找以position非static方式定位的祖先類(lèi)元素(注意，一定要是直系祖先才算哦~），直到<html>標(biāo)簽為止，這里還需要注意的是，relative和static方式在最外層時(shí)是以<body>標(biāo)簽為定位原點(diǎn)的，而absoulte方式在無(wú)父級(jí)是position非static定位時(shí)是以<html>作為原點(diǎn)定位。<html>和<body>元素相差9px左右。我們來(lái)看下效果：
(4) 添加absoulte屬性：
[html] view plain copy
<html>
<style type="text/css">
html{border:1px dashed green;}
body{border:1px dashed purple;}
#first{ width: 200px;height: 100px;border: 1px solid red;position: relative;}
#second{ width: 200px;height: 100px;border: 1px solid blue;position: absolute;top :0;left : 0;}
</style>
<body>
<div id="first">relative</div>
<div id="second">absoult</div>
</body>
</html>
哈哈，看了上面的代碼后，細(xì)心的朋友肯定要問(wèn)了，為什么absoulte定位要加 top:0; left:0; 屬性，這不是多此一舉呢？
其實(shí)加上這兩個(gè)屬性是完全必要的，因?yàn)槲覀內(nèi)绻?使用absoulte或fixed定位的話，必須指定 left、right、 top、 bottom 屬性中的至少一個(gè)，否則left/right/top/bottom屬性會(huì)使用它們的默認(rèn)值 auto ，這將導(dǎo)致對(duì)象遵從正常的HTML布局規(guī)則，在前一個(gè)對(duì)象之后立即被呈遞**，**簡(jiǎn)單講就是都變成relative，*會(huì)占用文檔空間，這點(diǎn)非常重要，很多人使用absolute定位后發(fā)現(xiàn)沒(méi)有脫離文檔流就是這個(gè)原因，這里要特別注意~~~
少了left/right/top/bottom屬性不行，那如果我們多設(shè)了呢？例如，我們同時(shí)設(shè)置了top和bottom的屬性值，那元素又該往哪偏移好呢？記住下面的規(guī)則：
如果top和bottom一同存在的話，那么只有top生效。
如果left和right一同存在的話，那么只有l(wèi)eft生效。
既然absoulte是根據(jù)祖先類(lèi)中的position非static元素進(jìn)行定位的，那么祖先類(lèi)中的margin/padding會(huì)不會(huì)對(duì)position產(chǎn)生影響呢？看個(gè)例子先：
(5) 在absoulte定位中添加margin / padding屬性：
[html] view plain copy
first{width: 200px;height: 100px;border: 1px solid red;position: relative;margin:40px;padding:40px;}
second{width: 200px;height:100px;border: 1px solid blue;position: absolute;top:20px;left:20px;}
<div id="first">first
<div id="second">second</div>
</div>
效果圖：
[圖片上傳中。。。（5）]
看懂了，祖先類(lèi)的margin會(huì)讓子類(lèi)的absoulte跟著偏移，而padding卻不會(huì)讓子類(lèi)的absoulte發(fā)生偏移。總結(jié)一下，就是absoulte是根據(jù)祖先類(lèi)的border進(jìn)行的定位。
***Note : ***絕對(duì)(absolute)定位對(duì)象在可視區(qū)域之外會(huì)導(dǎo)致滾動(dòng)條出現(xiàn)。而放置相對(duì)(relative)定位對(duì)象在可視區(qū)域之外，滾動(dòng)條不會(huì)出現(xiàn)。
固定定位(fixed)：
fixed定位，又稱(chēng)為固定定位，它和absoult定位一樣，都脫離了文檔流，并且能夠根據(jù)top、right、left、bottom屬性進(jìn)行定位，但不同的是fixed是根據(jù)窗口為原點(diǎn)進(jìn)行偏移定位的，也就是說(shuō)它不會(huì)根據(jù)滾動(dòng)條的滾動(dòng)而進(jìn)行偏移。
z-index屬性：
z-index，又稱(chēng)為對(duì)象的層疊順序，它用一個(gè)整數(shù)來(lái)定義堆疊的層次，整數(shù)值越大，則被層疊在越上面，當(dāng)然這是指同級(jí)元素間的堆疊，如果兩個(gè)對(duì)象的此屬性具有同樣的值，那么將依據(jù)它們?cè)贖TML文檔中流的順序?qū)盈B，寫(xiě)在后面的將會(huì)覆蓋前面的。需要注意的是，父子關(guān)系是無(wú)法用z-index來(lái)設(shè)定上下關(guān)系的，一定是子級(jí)在上父級(jí)在下。
Note：使用static 定位或無(wú)position定位的元素z-index屬性是無(wú)效的。
