一個絕對定位的元素,如果父輩元素中出現(xiàn)了也定位了的元素,那么將以父輩這個元素,為參考點。
需要注意一下幾點:
1.要聽最近的已經(jīng)定位的祖先元素的,不一定是父親,可能是爺爺:
1
??→ ?相對定位
2
?→ ?沒有定位
3 ??→ 絕對定位,將以box1為參考,因為box2沒有定位,box1就是最近的父輩元素
4
5
1
??→ ?相對定位
2
?→ 相對定位
3 ??→ 絕對定位,將以box2為參考,因為box2是自己最近的父輩元素
4
1
2.不一定是相對定位,任何定位,都可以作為參考點
1
?→ 絕對定位
2 ?→ 絕對定位,將以div作為參考點。因為父親定位了。
3
子絕父絕、子絕父相、子絕父固,都是可以給兒子定位的。但是,工程上子絕、父絕,沒有一個盒子在標(biāo)準(zhǔn)流里面了,所以頁面就不穩(wěn)固,沒有任何實戰(zhàn)用途。工程上,“子絕父相”有意義,父親沒有脫離標(biāo)準(zhǔn)劉,兒子脫離標(biāo)準(zhǔn)流在父親的范圍里面移動。
1
?→ 絕對定位
2
?→ 相對定位
3
?→ 沒有定位
4 ?→ 絕對定位,以box2為參考定位。
5
6
7
3. 絕對定位的兒子,無視參考的那個盒子的padding。
下圖中,綠色部分是div的padding,藍(lán)色部分是div的內(nèi)容區(qū)域。那么此時,div相對定位,p絕對定位。
p將無視父親的padding,在border內(nèi)側(cè)為參考點,進行定位: