本文轉(zhuǎn)自http://www.cnblogs.com/zhongxinWang/p/3233167.html
Position屬性
Position的屬性值共有四個(gè)static、relative、absolute、fixed。
Static
所有元素在默認(rèn)的情況下position屬性均為static，而我們在布局上經(jīng)常會用到的相對定位和絕對定位常用的屬性top、bottom、left、right。在position為static的情況下無效。其用法為：在改變了元素的position屬性后可以將元素重置為static讓其回歸到頁面默認(rèn)的普通流中。
Relative
我們此前說過每個(gè)元素在頁面的普通流中會有“占用”一個(gè)位置，這個(gè)位置可以理解為默認(rèn)位置，而相對定位就是將元素偏離元素的默認(rèn)位置，但****普通流中依然保持著原有的默認(rèn)位置，并沒有脫離****普通流，只是視覺上發(fā)生的偏移。relative的偏移是基于對象的margin的左上側(cè)，它可以在display:inline(行內(nèi)元素)的時(shí)候起作用。
我們先用塊狀元素來做個(gè)示例：
<style type="text/css">
div{ width: 100px; height: 50px; line-height: 50px; text-align: center; color: #fff; }
</style>
<div style="background: blue">A</div>
<div style="background: red; position: relative; top: 20px; left: 20px;">B</div>
<div style="background: green">C</div>
右圖中的黑色虛線部分為元素B的默認(rèn)普通流位置，而黃色線則代表元素B的相對偏移量。我們可以很明顯的看出在元素C依然還是保留在原位，并沒有因?yàn)樵谺發(fā)生了偏移而隨之變化。
我們再來看看行內(nèi)元素（在這里用大家最常用的span來做示例）
<style type="text/css">
strong { background: #808080; } em { background: #ffd800; } span { background: #b6ff00; position: relative; top: 10px; left: 10px; width: 100px; }
</style>
<strong>strong</strong><em>em</em><span>span</span>
在這里對span進(jìn)行width屬性的賦值（為100px），但是我們可以看到span在運(yùn)用了relative這個(gè)position屬性值后，依然對width屬性無效，沒有變成100px。換而言之，position: relative并沒有改變行內(nèi)元素的Display屬性，這個(gè)概念非常重要（注意與接下來的absolute的區(qū)別）--->relative只是視覺上發(fā)生位置變化不會改變display。
Absolute
俗稱的絕對定位，絕對定位是相對而言的，怎么理解呢？應(yīng)用了position: absolute的元素會循著節(jié)點(diǎn)樹中的父（祖）元素來確定“根”，然后相對這個(gè)“根”元素來偏移。如果在其節(jié)點(diǎn)樹中所有父（祖）元素都沒有設(shè)置position屬性值為relative或者absolute則該元素最終將對body進(jìn)行位置偏移。當(dāng)元素的父級設(shè)置了position屬性，且position的屬性值為absolute或者relative時(shí)，這個(gè)時(shí)候，元素將按照這個(gè)父級來進(jìn)行定位。應(yīng)用了position: absolute的元素會脫離頁面中的普通流并改變Display屬性！
我們先用一個(gè)默認(rèn)嵌套的DIV來做示例
<body style="background: yellow;">
<div style="background: #fff"> A <div style="background: #81b6ff"> A - 1 <div style="background: #b6ff00;"> A - 2 </div>
</div>
</div>
</body>
現(xiàn)在我們對A-2這個(gè)div設(shè)置絕對定位(Top: 0, Left: 0)，而沒有對它的父元素（A、A-1）設(shè)置任何的position值
<body style="background: yellow;">
<div style="background: #fff"> A <div style="background: #81b6ff"> A - 1 <div style="background: #b6ff00; position: absolute; top: 0; left: 0;"> A - 2 </div>
</div>
</div>
</body>
可以看到（A-2）最終是根據(jù)body來產(chǎn)生了位移，讓我們對比分別設(shè)置一下父元素position。
從上面的圖，我們可以總結(jié)以下幾個(gè)結(jié)論。
1）塊狀元素在position(relative/static)的情況下width為100%，但是設(shè)置了position: absolute之后，會將width變成auto（會受到父元素的寬度影響）。
2）元素設(shè)置了position: absolute之后，如果沒有設(shè)置top、bottom、left、right屬性的話，瀏覽器會默認(rèn)設(shè)置成auto，而auto的值則是該元素的“默認(rèn)位置”。即設(shè)置position: absolute前后的offsetTop和offsetLeft屬性值不變。
特殊情況：
- Firefox的話會直接將top、left設(shè)置成offsetTop和offsetLeft的值而非auto。
- IE7下會附加到父元素的末尾。
一些Position小知識
1）應(yīng)用了position: relative/absolute的元素，margin屬性仍然有效，以position:relative來舉例。如果設(shè)置了left、top、bottom、right的屬性，建議大家不要設(shè)置margin數(shù)據(jù)，因?yàn)楹茈y精確元素的定位，盡量減少干擾因素。
2）position: absolute忽略根元素的padding。
<div id="a" style="background: #fff; width: 200px;"> A <div id="b" style="background: #81b6ff; width: 150px; position: relative; padding-top: 100px;"> A - 1 <div id="c" style="background: #b6ff00; position: absolute; left: 0; top: 0"> A - 2 </div>
</div>
</div>
3）在IE6/7中設(shè)置position屬性后會導(dǎo)致z-index屬性失效
<!-- 解決方案，父元素設(shè)置一個(gè)更大的z-index值即可 -->
<div style="z-index: 2;"> a <div style="position: relative; z-index: 1;"> b </div>
</div>
4）行內(nèi)元素在應(yīng)用了position：absolute之后會改變display。
<span style="position: absolute; width: 100px; height: 100px; top: 10px; left: 10px; background: #fff;"> 我的display屬性由inline變成了block </span>
因此，要注意到relative是并沒有改變行內(nèi)元素的呈現(xiàn)模式，而absolute是會改變行內(nèi)元素的呈現(xiàn)模式，如果設(shè)置了absolute并不需要顯式的的將元素display改成block。
5）應(yīng)用了position: absolute / relative之后，會覆蓋其他非定位元素（即position為static的元素），如果你不想覆蓋到其他元素，也可以將z-index設(shè)置成-1。
Fixed
在很長的時(shí)間里，這個(gè)屬性值因?yàn)榧嫒菪詥栴}，并沒有得到非常廣泛的應(yīng)用（IE6未實(shí)現(xiàn)該屬性值）。fixed和absolute有很多共同點(diǎn)：
- 會改變行內(nèi)元素的呈現(xiàn)模式，使display之變更為block。
- 會讓元素脫離普通流，不占據(jù)空間。
- 默認(rèn)會覆蓋到非定位元素上。
fixed與absolute最大的區(qū)別在于：absolute的”根元素“是可以被設(shè)置的，而fixed則其”根元素“固定為瀏覽器窗口。即當(dāng)你滾動(dòng)網(wǎng)頁，其元素與瀏覽器窗口之間的距離是恒定不變的。
