標籤：position
在部落格《HTML CSS——position學習終結者(一)》中我們認識到如果某一absolute作用的元素的父物件(或曾祖父，只要是父級對象)設定了position屬性且position的屬性值為absolute、relative或者fixed，那麼這個子項目會參照離它（指子項目）最近的且position的屬性值為absolute、relative或者fixed的父元素進行定位，子項目的錨點為父元素的左上方，學習過padding的人可能會這樣想：這個時候如果父元素設定了padding樣式，那absolute作用的子項目應該從padding處開始定位吧？呵呵呵，這種認識對嗎，先參見下面的例子：
代碼01：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-type" content="text/html; charset=UTF-8" /><style type="text/css">body{margin:0px;background-color:gray;}.parent{position:absolute;margin-left:50px;width:300px;height:300px;background-color:yellow;}.son1{position:absolute;left:150px;width:50px;height:50px;background-color:green;}.son2{width:50px;height:50px;background-color:red;}</style></head><body><div class="parent"><div class="son1">son1</div><div class="son2">son2</div></div></body></html>
圖01
說明：上面的son1父元素沒有使用padding樣式，這時son1錨點為父元素的左上方；
代碼02
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-type" content="text/html; charset=UTF-8" /><style type="text/css">body{margin:0px;background-color:gray;}.parent{position:absolute;margin-left:50px;padding-left:50px;width:300px;height:300px;background-color:yellow;}.son1{position:absolute;left:150px;width:50px;height:50px;background-color:green;}.son2{width:50px;height:50px;background-color:red;}</style></head><body><div class="parent"><div class="son1">son1</div><div class="son2">son2</div></div></body></html>
圖02
說明：上面的son1父元素添加了樣式padding-left並設定其值為50px；
總結：對比圖01和圖02我們會發現這種情況下son1並沒有受padding-left的影響，據此我們可以認定父元素縱使設定了padding樣式，absolute作用的子項目也是從父元素的左上方開始定位。
【0分下載示範資源】
【參見另一篇部落格——HTML CSS——position學習終結者(一)】
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
