position的值有以下五種，現結合例子談一下我對這五種值的認識：
一、不使用任何值：
代碼1-1如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-type" content="text/html; charset=UTF-8" /><style type="text/css">.parent{width:300px;height:300px;background-color:gray;}.son1{width:50px;height:50px;background-color:green;}.son2{width:50px;height:50px;background-color:red;}</style></head><body><div class="parent"><div class="son1">son1</div><div class="son2">son2</div></div></body></html>
圖1-1
二、static：預設值。沒有定位，元素忽略 top, bottom, left, right 或者 z-index 聲明，按照正常的文檔流進行排列。
代碼2-1如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-type" content="text/html; charset=UTF-8" /><style type="text/css">.parent{width:300px;height:300px;background-color:gray;}.son1{position:static;left:60px;top:60px;width:50px;height:50px;background-color:green;}.son2{width:50px;height:50px;background-color:red;}</style></head><body><div class="parent"><div class="son1">son1</div><div class="son2">son2</div></div></body></html>
圖2-1
總結：
①、比對圖1-1與圖2-1可以發現兩者沒有什麼差別，這說明static是position的預設值；
②、上面代碼son1 div樣式中設定了left和top屬性，但從圖2可以發現這些屬性的設定並沒有起到應有的作用，這印證了position為static時會忽略 top, bottom, left, right 或者 z-index 聲明
三、relative：這個單詞本身是“相關、相對”的意思，從這個單詞可以看出該值的作用，不過這裡要搞清楚它是相對哪個對象來進行位移的。
代碼3-1如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-type" content="text/html; charset=UTF-8" /><style type="text/css">.parent{width:300px;height:300px;background-color:gray;}.son1{position:relative;left:60px;top:60px;width:50px;height:50px;background-color:green;}.son2{width:50px;height:50px;background-color:red;}</style></head><body><div class="parent"><div class="son1">son1</div><div class="son2">son2</div></div></body></html>
圖3-1
總結：
①、對比圖1-1代碼和圖3-1代碼，對比圖1-1和圖3-1，可以得出這樣的結論：son1是相對它原來的位置進行位移的；
②、哪些屬性可以設定son1的位移位置：top、right、bottom、left都可以做到；
③、son1和son2屬於同級，son1位移後，那son2位移了嗎？son2沒有位移，它依然在原來的位置，其實①已經可以回答這個問題了，可以這樣理解：如果沒有設定position的值，son1的位置會按照正常的文檔流進行排列；如果設定son1 position屬性的值為relative，son1的位置會按照top、right、bottom、left的值進行位置位移，這種位移是相對它原來的位置進行的（relative的“相對的”意思也正體現於此）；
④、如果為son2也添加position的值為relative並添加left等屬性，會發生什嗎？通過①可以回答這個問題：會按照son2原來的位置進行相對的位移，還是那句話——這裡的“相對”是與原來的位置相比；
⑤、呵呵呵，上面幾點中有三點提到了“原來的位置”，那麼它相對於原來位置的哪個部位位移的呢？中心嗎？不是的，relative的位移是基於對象的margin的左上側的來說的；
四、absolute：毫不掩飾，當初學習這塊兒時，就是這個absolute把我弄懵了，呵呵呵，下面通過例子來一層層的理解這個absolute（注意：為了更好地理解absolute值，請先“忘掉前面講的一切”）：
代碼4-1如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-type" content="text/html; charset=UTF-8" /><style type="text/css">body{margin:0px;background-color:gray;}.son1{width:50px;height:50px;background-color:green;}.son2{width:50px;height:50px;background-color:red;}</style></head><body><div class="son1">son1</div><div class="son2">son2</div></body></html>
說明：觀察代碼4-1可知中沒有使用position屬性，也就是說position屬性的值為static；
代碼4-2如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-type" content="text/html; charset=UTF-8" /><style type="text/css">body{margin:0px;background-color:gray;}.son1{position:relative;left:150px;width:50px;height:50px;background-color:green;}.son2{width:50px;height:50px;background-color:red;}</style></head><body><div class="son1">son1</div><div class="son2">son2</div></body></html>
圖4-2
說明：比對代碼4-1和代碼4-2，可以看到唯一變化的地方就是son1的樣式添加了“position:relative;left:150px;”；
代碼4-3如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-type" content="text/html; charset=UTF-8" /><style type="text/css">body{margin:0px;background-color:gray;}.son1{position:absolute;left:150px;width:50px;height:50px;background-color:green;}.son2{width:50px;height:50px;background-color:red;}</style></head><body><div class="son1">son1</div><div class="son2">son2</div></body></html>
圖4-3
說明：比對代碼4-2和代碼4-3，可以看到唯一變化的地方就是son1的樣式position的屬性值有relative改為了absolute；
總結：
①、對比圖4-2和圖4-3可以很輕易的得出relative和absolute的一個區別：relative所作用的元素移動後，原來的位置沒有被其它元素佔用；absolute所作用的元素移動後，原來的位置會被其它元素佔用；
②、absolute影響的元素移動後之所以會被其它元素佔用是因為被absolute影響的元素脫離了文檔流，不在自上而下、自左而右的顯示元素，而另一個元素（son2）則沒有脫離文檔流，這時沒有脫離文檔流的元素直接從父元素（body相對於son2而言是父元素）開始定位，即言沒有脫離文檔流的元素（son2）的文檔流不再基於absolute影響的元素（son1）而是基於父元素定位，於是就看到了這種情形；
代碼4-4如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-type" content="text/html; charset=UTF-8" /><style type="text/css">body{margin:0px;background-color:gray;}.parent{margin-left:50px;width:300px;height:300px;background-color:yellow;}.son1{position:absolute;left:150px;width:50px;height:50px;background-color:green;}.son2{width:50px;height:50px;background-color:red;}</style></head><body><div class="parent"><div class="son1">son1</div><div class="son2">son2</div></div></body></html>
說明：觀察代碼4-4可知class為parent的div沒有使用position屬性，也就是說其position屬性的值為static；
代碼4-5如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-type" content="text/html; charset=UTF-8" /><style type="text/css">body{margin:0px;background-color:gray;}.parent{position:absolute;margin-left:50px;width:300px;height:300px;background-color:yellow;}.son1{position:absolute;left:150px;width:50px;height:50px;background-color:green;}.son2{width:50px;height:50px;background-color:red;}</style></head><body><div class="parent"><div class="son1">son1</div><div class="son2">son2</div></div></body></html>
圖4-5
說明：觀察代碼4-5可知class為parent的div的position屬性的值為absolute；
代碼4-6如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-type" content="text/html; charset=UTF-8" /><style type="text/css">body{margin:0px;background-color:gray;}.parent{position:relative;margin-left:50px;width:300px;height:300px;background-color:yellow;}.son1{position:absolute;left:150px;width:50px;height:50px;background-color:green;}.son2{width:50px;height:50px;background-color:red;}</style></head><body><div class="parent"><div class="son1">son1</div><div class="son2">son2</div></div></body></html>
圖4-6
說明：觀察代碼4-6可知class為parent的div的position屬性的值為relative；
代碼4-7如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-type" content="text/html; charset=UTF-8" /><style type="text/css">body{margin:0px;background-color:gray;}.parent{position:fixed;margin-left:50px;width:300px;height:300px;background-color:yellow;}.son1{position:absolute;left:150px;width:50px;height:50px;background-color:green;}.son2{width:50px;height:50px;background-color:red;}</style></head><body><div class="parent"><div class="son1">son1</div><div class="son2">son2</div></div></body></html>
圖4-7 說明：觀察代碼4-7可知class為parent的div的position屬性的值為fixed；
總結：
①、對比圖4-4、圖4-5、圖4-6和圖4-7可以很輕易的得出這樣一個結論：如果某一absolute作用的元素（比如：上面的son1）的父物件(或曾祖父，只要是父級對象（比如上面class為parent的div）)設定了position屬性且position的屬性值為absolute、relative或者fixed，那麼這個子項目（比如：上面的son1）會參照離它（指子項目）最近的且position的屬性值為absolute、relative或者fixed的父元素（比如上面class為parent的div）進行定位，可是以父元素哪個錨點來進行定位呢，答案是父元素的左上方（永遠都是父元素的左上方，如果父元素樣式中有padding也是這樣，這一點可參考另一篇部落格——《HTML CSS——position學習終結者(二)》）；如果子項目（比如：上面的son1）的所有父元素的position屬性值不為absolute、relative或者fixed，那麼該子項目將以body為定位對象進行定位，圖4-4很好的示範了這一點（注意：單單就子項目而言圖4-4和圖4-3是一樣的，它們參照定位對象都是body）；
②、由於將元素position屬性設定為absolute後，會導致該元素脫離文檔流，就像它不屬於父物件一樣，它漂浮了起來，在DreamWeaver中把它稱為“層”，其實意思是一樣的；
五、fixed：fixed是特殊的absolute，position屬性值為fixed的元素總是以body元素為定位對象（即按照瀏覽器的視窗進行定位）通過"left"、"top"、"right"或"bottom" 屬性進行規定，即使拖動捲軸，該元素所在的位置也不會改變的（與background-attachment:fixed相似）。
六、inherit：該屬性作用的元素繼承父元素position的屬性值，由於該屬性在任何的版本的 Internet Explorer （包括 IE8）都不支援，所以可以忽略它。
【0分下載示範資源】
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
