目前幾乎所有主流的瀏覽器都支援position屬性（"inherit"除外，"inherit"不支援所有包括ie8和之前版本ie瀏覽器，ie9、ie10還沒測試過），以下是w3school對position五個值的解釋：
其中absolute和relative是最常用的，fixed用得也比較多（其中ie6並不支援fixed）。
1、absolute（絕對定位）
absolute是生成覺對定位的元素，脫離了文字流（即在文件中已經不佔據位置），參照瀏覽器的左上角通過top,right,bottom,left（簡稱trbl） 定位。可以選取具有定位的父級物件（下文將說到relative與absolute的結合使用）或者body座標原點進行定位，也可以通過z-index進行層次分級。absolute在沒有設定trbl值時是根據父級物件的座標作為始點的，當設定trbl值後則根據瀏覽器的左上角作為原始點。具體案例如下：
複製**
**如下:
程式設計客棧arset=utf-8" />
position:absolute定位
position:absolute定位測試
這段**產生的效果如下：
這是設定trbl之後的效果(設定trbl以瀏覽器左上角為原點)，當沒有設定trbl時（沒有設定trbl是以父級物件的座標為原點），即將div1改成如下**時
複製**
**如下:
.div1
則效果如下：
2、relative（相對定位）
relative是相對的意思，顧名思義就是相對於元素本身在文件中應該出現的位置來移動這個元素，可以通過trbl來移動元素的位置，實際上該元素依然佔據文件中原有的位置，只是視覺上相對原來的位置有移動。具體案例如下：
複製**
**如下:
position:relative定位
position:relative定位測試
**產生的效果如下：
3、relative與absolute的結合使用
在網頁設計時經常會用到浮動來對頁面進行布局，但是浮動所帶來的不確定因素卻很多（例如：ie瀏覽器的相容問題）。相對來說，在有些布局中定位使用會更加簡單、快捷、相容性更好（relative與absolute相結合來使用），下面通過網頁中的乙個例項（網頁中的head部分）進行說明，具體**如下：
複製**
**如下:
效果如下圖：
在上述**中首先是給head設定relative定位，那麼可以看到裡面所有的子元素在設定absolute後都會相對head進行定位，而不是相對body定位。這樣相對於用浮動來說就簡單方便了很多，也不需要擔心相容問題。
本文標題: css position屬性的正確解釋和例項應用
本文位址: /web/css/80223.html
CSS Position屬性的學習
position屬性真是萌新殺手t t，參照誰定位？誰又脫離了文件流？理解了好長時間才摸清了一些門路。現在就對css position屬性及html中有關定位的知識做一次梳理和總結。position static static是position屬性的預設值，代表 沒有定位 即元素出現在正常的文件流中...
CSS position屬性用法
絕對定位 position absolute 有如下兩種情況 1，沒有設定 top right bottom left 的情況，預設依據父級的 內容區域原始點 為原始點 2，有設定 top right bottom left 的情況，這裡又分了兩種情況如下 1 父級沒 position 屬性，瀏覽器...
css position 屬性詳解
相信很多同學在編寫 設計 的時候多多少少用過css裡的position這個屬性，但是很多時候網頁顯示出來的和自己想象的不太一樣，這篇部落格來教你怎麼使用position。position屬性共有5個不同的值，下面是w3school給出的 解釋 其中，如果不對dom中的元素設定position屬性，那...