position：absolute 的深入探討
今天給大家說說，position：absolute 參考誰進行定位的問題。之前大家可能會認為如果absolute元素的父級（祖父）元素沒有設定position屬性的時候，該元素的position：absolute會參考body進行定位。
換句話說是如果父級設定了position（且值為非static），參照（最近的）父級的內容區域的左上角為初始點，結合top left right bottom 進行定位； 如果沒有設定，往其父級繼續尋找，直到找到為止，如果一直沒有，則相對與body進行定位（我們猜想是這樣的，但是不一定是對哦~~）。
測試例項：
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>HTML5Course - 夢幻雪冰</title> <link rel="stylesheet" href="reset.css"> <style> /*正常是不能這麼設定的，這邊主要是用來測試*/ html { margin: 20px; border: 20px solid red; } /*正常是不能這麼設定的，這邊主要是用來測試*/ body { height: 400px; margin: 30px; border: 20px solid green; } .wrap { position: absolute; top: 0; left: 0; width: 100px; height: 100px; background-color: pink; } </style> </head> <body> <div class="wrap">夢幻雪冰</div> </body> </html>
測試結果：
Tips：圖中紅色邊框為html元素，綠色邊框為body元素
結論：測試資料發現如果定位的元素的父級（祖父）沒有設定position屬性的時候，不會參考body進行定位。
為了再次驗證我們的結論，我們給body設定position屬性（值為非static），看看結果會是如何？
測試例項：
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>HTML5Course - 夢幻雪冰</title> <link rel="stylesheet" href="reset.css"> <style> /*正常是不能這麼設定的，這邊主要是用來測試*/ html { margin: 20px; border: 20px solid red; } /*正常是不能這麼設定的，這邊主要是用來測試*/ body { position: relative; height: 400px; margin: 30px; border: 20px solid green; } .wrap { position: absolute; top: 0; left: 0; width: 100px; height: 100px; background-color: pink; } </style> </head> <body> <div class="wrap">夢幻雪冰</div> </body> </html>
測試結果：
Tips：圖中紅色邊框為html元素，綠色邊框為body元素
看到結果，發現如果給body設定了position屬性就正常了，所以我們之前的猜想是錯誤的，不是參考body進行定位的。
那麼position：absolute是參考哪一個父級（祖父）元素進行定位的？
當給元素設定absolute的時候，它會往上查詢 absolute 元素的第一個父元素，如果該父元素的 position 值存在（且不為 static）,那麼就是根據該父元素進行的定位，否則將會繼續查詢該父元素的父元素，一直追溯到某個父元素具備不為 static 的 position 值為止，如果不存在滿足條件的父元素，則會根據最外層的 window 進行定位。
英文描述如下：
歡迎溝通交流~HTML5學堂