一直以來，CSS中最讓我糾結的莫過於position屬性和index屬性。在寫網頁的時候用這兩個屬性都達不到想要的效果，或者達到了想要的效果但是影響到其他標籤的位置，又或是達到了效果不影響其他標籤，但是換了其他瀏覽器顯示又不正確。
這些個問題都很頭疼，不僅要求自己對position和index的用法和含義完全領會，而且要解決各個瀏覽器不相容的問題。這一篇就先講一下position的用法。
position預設值是static(也就是沒有定位，出現在正常流中罷了，該在哪裡就在那裡)
注意這個屬性一般要與top,bottom,left,right屬性合起來用
首先明確下，任何元素都可定位。絕對和固定定位，元素會產生一個塊級框；相對定位元素相對於在它正常流中的預設位置位移，我常常搞不清楚，這裡所說的預設位置是什麼位置。其實大家可以先把position的屬性去掉，運行看看網頁上對應的元素處於什麼位置，這裡的位置應該就是預設位置。再把position屬性加上去看看猜想正不正確。
下面是我自己寫的例子，雖然不是很完善，但應該很能說明問題。
HTML:
<!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>position講解</title><style type="text/css">.staticType {position: static;top: 30px;left: 30px;}.relativeType {position: relative;top: 30px;left: 30px;}.absoluteType {position: absolute;top: 30px;left: 30px;}.fixedType {position: fixed;top: 30px;left: 30px;}</style></head><body><div style="width:1200px; margin:0 auto; border:1px solid #00F"> <div style="width:960px; margin:0 auto; position:relative; border:1px solid #FF0"> <div> <p>這個是沒有顯式使用position屬性</p> <br /> <br /> <div style=" border:1px solid #F00"> 這是一個塊 </div> <div style="border:1px solid #00F; color:#F00"> 這個是沒有顯式使用position屬性的塊 </div> </div> <div> <p>這個是用了position的static屬性</p> <br /> <br /> <div style=" border:1px solid #F00"> 這是一個塊 </div> <div style="border:1px solid #00F; color:#F00" class="staticType"> 這個是用了position的static屬性塊 </div> </div> <div> <p>這個是用了position的relative屬性</p> <br /> <br /> <div style=" border:1px solid #F00"> 這是一個塊 </div> <div style="border:1px solid #00F; color:#F00" class="relativeType"> 這個是用了position的relative屬性的塊 </div> </div> <div> <p>這個是用了position的absoulte屬性</p> <br /> <br /> <div style=" border:1px solid #F00"> 這是一個塊 </div> <div style="border:1px solid #00F; color:#F00" class="absoluteType"> 這個是用了position的absoulte屬性的塊 </div> </div> <div> <p>這個是用了position的fixed屬性</p> <br /> <br /> <div style=" border:1px solid #F00"> 這是一個塊 </div> <div style="border:1px solid #00F; color:#F00" class="fixedType"> 這個是用了position的fixed屬性的塊 </div> </div> </div></div></body></html>
這是：
absolute(絕對位置)：
相對於static定位外的第一個父元素進行定位。
大家可以在圖中看到對應的absolute屬性塊的位置，是相對於那個width=960px的黃色邊框的塊定位的。
定位的步驟：跟absolute屬性塊同等級的標籤先忽略了，跳到外面的父級標籤，如果父標籤塊沒有定義除了預設的static的以外的position屬性(這邊可能有點繞)，就繼續往上尋找合適的父標籤，直到找到再依據那個父標籤進行定位。
如果嘗試把黃色邊框的position屬性去掉，那麼absolute屬性塊的位置就會相對於瀏覽器視窗，和fixed屬性塊重疊了。
fixed(絕對位置，我的理解就是固定到瀏覽器的某個位置不動了)：
以上例子中fixed屬性塊就是相對於瀏覽器視窗定位的。(瀏覽器視窗起始位置是最左上方的位置(0,0))
relative(相對定位，一般這個和static定位一樣的位置)
圖中可以看出，relative和static定位的兩個屬性塊處於一樣的位置。
以上就是我對position的認識，可能有所偏差，希望大家能夠提出來。
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
