一、如果元素的position屬性值為absolute，那么此時分為兩種情況：
1. 父級（包括直接父級和間接父級）元素中沒有定義position屬性（即默認屬性static），那么該元素會參照頁面，以頁面為基准進行定位，top, left等屬性會參照頁面。
如果該元素的width和height屬性是百分數的話，那么這兩個屬性也是參照頁面的寬度和高度。
<!doctype html> <html> <head> <meta charset="utf-8"> <style> *{margin: 0; padding: 0;} #div1 { width: 200px; height: 200px; background: #ccc; } #div2 { width: 50%; height: 50%; background: #aaa; top: 100px; left: 100px; position: absolute; } </style> </head> <body> <div id="div1"> <div id="div2"></div> </div> </body> </html>
以上代碼中，div2是絕對定位，而其父級元素沒有設置position屬性，那么該元素就會以頁面為參照進行定位。
從圖中可以看到，div2是相對於頁面定位的，而且其寬度和高度是頁面寬高的一半。
從控制台可以看到，頁面的寬度和高度正好是div2元素的2倍。
2. 父級元素定義了position屬性(relative或absolute)，則會參照父級元素。
<!doctype html> <html> <head> <meta charset="utf-8"> <style> *{margin: 0; padding: 0;} #div1 { width: 200px; height: 200px; background: #ccc; position: relative; top: 100px; left: 100px; } #div2 { width: 50%; height: 50%; background: #aaa; top: 100px; left: 100px; position: absolute; } </style> </head> <body> <div id="div1"> div1 <div id="div2">div2</div> </div> </body> </html>
從圖中可以看到，div2是相對於div1定位的，寬度和高度也是相對於div1
二、如果元素的position屬性值為relative，那么該元素相對於其正常位置（即position:static）定位。
默認情況下寬度會占滿父容器，高度根據本身內容決定。當是父元素的第一個子元素時，位置會在父元素的左上角。
那么設置其位置和大小就會以自己為參照，height的情況特殊，當設置height時，會以充滿父容器的狀態為參照。
<!doctype html> <html> <head> <meta charset="utf-8"> <style> *{margin: 0; padding: 0;} #div1 { width: 100px; height: 100px; background: #ccc; } #div2 { width: 50%; height: 50%; background: #aaa; top: 100px; left: 100px; position: relative; } </style> </head> <body> <div id="div1"> <div id="div2"></div> </div> </body> </html>
