首頁 > 開發者 > JavaScript
HTML元素大小和位置相對於誰的問題，html元素大小誰的
一、如果元素的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>
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
