position屬性真是萌新殺手t_t，參照誰定位？誰又脫離了文件流？理解了好長時間才摸清了一些門路。現在就對css position屬性及html中有關定位的知識做一次梳理和總結。
position: static;position: absolute;絕對定位到底是怎麼確定位置的呢？拿下面的**舉例：
body
pdiv
#div1
p#p1 div
#div2
p#p2
style>
head>
id="div1">
id="p1">絕對定位p1p>
div>
id="div2">
id="p2">絕對定位p2p>
div>
body>
html>執行結果：
分析：按照剛剛的思維——絕對定位的元素會相對於static定位以外的第乙個父元素進行定位。
對於#p1，它的第乙個父元素是#div1，而#div1並沒有指定position樣式，也就是說#div1的position為預設值static，不滿足要求，所以繼續往上找，找到第二個父元素body，但body也沒有被指定position樣式，所以依然不是滿足要求的參照元素，繼續往上找。找到第三個父元素html，雖然html也沒有被指定position，但它已經是這個文件的祖宗了，所以#p1就以html為參照元素進行定位。
對於#p2，它的第乙個父元素是#div2，#div2指定了position: relative，即「static定位以外的父元素」，所以#p2就以#div2為參照元素進行定位。
事實上，如果將上例#div2的position更改為absolute或fixed，#p1依然會參照#div2進行定位，因為#div2的position不為static.
p.s. 為什麼明明top和left都是10px，兩個p卻看起來離上面更遠一些？p元素預設margin的關係。
絕對定位的元素會脫離文件流，拿下面的**舉例：
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屬性，那...
CSS position 屬性分析
position是css重要的屬性，通過設定position，可以把元素放置到乙個靜態的 相對的 絕對的或者是固定的位置中。position有以下五個屬性 在某些資料 中，可能只會介紹前四個屬性 值描述 static 預設值，設定了static的屬性，沒有定位，它會出現在正常的流中。relative...