我們先來看看CSS3 Api中對position屬性的相關(guān)定義：
static：無特殊定位鳍侣，對象遵循正常文檔流。top，right虐杯，bottom，left等屬性不會被應(yīng)用昧港。
relative：對象遵循正常文檔流擎椰，但將依據(jù)top，right创肥，bottom达舒，left等屬性在正常文檔流中偏移位置。而其層疊通過z-index屬性定義叹侄。
?absolute：對象脫離正常文檔流巩搏，使用top，right趾代，bottom贯底，left等屬性進(jìn)行絕對定位。而其層疊通過z-index屬性定義撒强。
?fixed：對象脫離正常文檔流禽捆，使用top，right飘哨，bottom胚想，left等屬性以窗口為參考點進(jìn)行定位，當(dāng)出現(xiàn)滾動條時芽隆，對象不會隨著滾動浊服。而其層疊通過z-index屬性定義。
怎么樣胚吁，是不是還是很迷糊~~ 沒關(guān)系牙躺，下面就從幾個基礎(chǔ)概念一一給大家詳述：
什么是文檔流？
????? 將窗體自上而下分成一行行, 并在每行中按從左至右的順序排放元素,即為文檔流腕扶。
????? 只有三種情況會使得元素脫離文檔流述呐，分別是：浮動、絕對定位和相對定位蕉毯。
靜態(tài)定位(static) ：
????? static，無特殊定位思犁，它是html元素默認(rèn)的定位方式代虾，即我們不設(shè)定元素的position屬性時默認(rèn)的position值就是static，它遵循正常的文檔流對象激蹲，對象占用文檔空間棉磨，該定位方式下，top学辱、right乘瓤、bottom环形、left、z-index等屬性是無效的衙傀。
相對定位(relative) ：
????? relative定位抬吟，又稱為相對定位，從字面上來解析统抬，我們就可以看出該屬性的主要特性：相對火本。但是它相對的又是相對于什么地方而言的呢？這個是個重點聪建，也是最讓我迷糊的一個地方钙畔，現(xiàn)在讓我們來做個測試，我想大家都會明白的：
(1) 初始未定位
/******初始*********/
<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屬性：
<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>
? 相對偏移20px后：
-- >> 虛線是初始的位置空間
????? 現(xiàn)在看明白了吧金麸，相對定位相對的是它原本在文檔流中的位置而進(jìn)行的偏移擎析，而我們也知道relative定位也是遵循正常的文檔流，它沒有脫離文檔流挥下，但是它的top/left/right/bottom屬性是生效的揍魂，可以說它是static到absoult的一個中間過渡屬性，最重要的是它還占有文檔空間见秽，而且占據(jù)的文檔空間不會隨 top / right / left / bottom 等屬性的偏移而發(fā)生變動愉烙，也就是說它后面的元素是依據(jù)虛線位置( top / left / right / bottom 等屬性生效之前)進(jìn)行的定位，這點一定要理解解取。
???? 那好步责，我們知道了top / right / left / bottom 屬性是不會對relative定位的元素所占據(jù)的文檔空間產(chǎn)生偏移，那么margin / padding會讓該文檔空間產(chǎn)生偏移嗎禀苦？答案是肯定的蔓肯，我們一起來做個試驗吧：
(3) ? 添加margin屬性：
<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>
? 設(shè)置margin：20px后：
???? 對比一下，是不是就很清晰了振乏，我們先將first元素外邊距設(shè)為20px蔗包，那么second元素就得向下偏移40px，所以margin是占據(jù)文檔空間慧邮！同理调限，大家可以自己動手測下padding的效果吧！
絕對定位(absoulte) ：
?? ? ? absoulte定位误澳，也稱為絕對定位耻矮，雖然它的名字號曰“絕對”，但是它的功能卻更接近于"相對"一詞忆谓，為什么這么講呢裆装？原來，使用absoult定位的元素脫離文檔流后，就只能根據(jù)祖先類元素(父類以上)進(jìn)行定位哨免，而這個祖先類還必須是以postion非static方式定位的茎活， 舉個例子，a元素使用absoulte定位琢唾，它會從父類開始找起载荔，尋找以position非static方式定位的祖先類元素(注意，一定要是直系祖先才算哦~）慧耍，直到<html>標(biāo)簽為止身辨，這里還需要注意的是，relative和static方式在最外層時是以<body>標(biāo)簽為定位原點的芍碧，而absoulte方式在無父級是position非static定位時是以<html>作為原點定位煌珊。<html>和<body>元素相差9px左右。我們來看下效果：
(4) 添加absoulte屬性：
<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ì)心的朋友肯定要問了，為什么absoulte定位要加 top:0; left:0; 屬性踪危，這不是多此一舉呢蔬浙？
?????? 其實加上這兩個屬性是完全必要的，因為我們?nèi)绻褂胊bsoulte或fixed定位的話贞远，必須指定 left畴博、right、 top蓝仲、 bottom 屬性中的至少一個俱病，否則left/right/top/bottom屬性會使用它們的默認(rèn)值 auto ，這將導(dǎo)致對象遵從正常的HTML布局規(guī)則袱结，在前一個對象之后立即被呈遞亮隙，簡單講就是都變成relative，會占用文檔空間垢夹，這點非常重要溢吻，很多人使用absolute定位后發(fā)現(xiàn)沒有脫離文檔流就是這個原因，這里要特別注意~~~
少了left/right/top/bottom屬性不行果元，那如果我們多設(shè)了呢促王？例如，我們同時設(shè)置了top和bottom的屬性值而晒，那元素又該往哪偏移好呢蝇狼？記住下面的規(guī)則：
如果top和bottom一同存在的話，那么只有top生效欣硼。
如果left和right一同存在的話，那么只有l(wèi)eft生效。
既然absoulte是根據(jù)祖先類中的position非static元素進(jìn)行定位的诈胜，那么祖先類中的margin/padding會不會對position產(chǎn)生影響呢豹障？看個例子先：
(5) 在absoulte定位中添加margin / padding屬性：
#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>
效果圖：
????? 看懂了，祖先類的margin會讓子類的absoulte跟著偏移焦匈，而padding卻不會讓子類的absoulte發(fā)生偏移血公。總結(jié)一下缓熟，就是absoulte是根據(jù)祖先類的border進(jìn)行的定位累魔。
Note : 絕對(absolute)定位對象在可視區(qū)域之外會導(dǎo)致滾動條出現(xiàn)。而放置相對(relative)定位對象在可視區(qū)域之外够滑，滾動條不會出現(xiàn)垦写。
固定定位(fixed)：
???? ? fixed定位，又稱為固定定位彰触，它和absoult定位一樣梯投，都脫離了文檔流，并且能夠根據(jù)top况毅、right分蓖、left、bottom屬性進(jìn)行定位尔许，但不同的是fixed是根據(jù)窗口為原點進(jìn)行偏移定位的么鹤，也就是說它不會根據(jù)滾動條的滾動而進(jìn)行偏移。
z-index屬性：
?????? z-index味廊，又稱為對象的層疊順序蒸甜，它用一個整數(shù)來定義堆疊的層次，整數(shù)值越大毡们，則被層疊在越上面迅皇，當(dāng)然這是指同級元素間的堆疊，如果兩個對象的此屬性具有同樣的值衙熔，那么將依據(jù)它們在HTML文檔中流的順序?qū)盈B登颓，寫在后面的將會覆蓋前面的。需要注意的是红氯，父子關(guān)系是無法用z-index來設(shè)定上下關(guān)系的框咙，一定是子級在上父級在下。
Note：使用static 定位或無position定位的元素z-index屬性是無效的
