css-絕對定位的參考對象

當我們把一下element設爲絕對定位時,我們需要尋找絕對定位的參考對象,一般情況下,我們發現是body對象,但這並不是真理.

 

 

當一個絕對定位的對象尋找它的參考對象時,是從它的父結點開始向上尋找的.它的定位參考對象是和它離的最近的並明確設了position屬性,但所設值不是static的祖先.

 

按照上面的說法一般沒錯,但是如果它的祖先中有一個竟然把position設成了inherit,這時,就還要參考它這個祖先的祖先的position屬性,是不是有點頭大了...我也暈了.

 

重頭來過,我們來說position屬性,它有四個值:absolute,relative,fixed,static;對於inherit,我不把它作爲一個值,因爲它最終會轉化爲上面四個值中的一個值,說白了就是繼承它父親的值.現在,又有情況了:

 

  1. 如果有個對象設置position爲四個值中的一個值,這時沒有疑問.
  2. 如果對象根本就沒設position屬性,那它就是static的.
  3. 如果有個對象設置position爲inherit,那它就和它父親取一樣的值,比如它的父親未設position屬性,所以參考2:它父親的position是static的,所以它的position也是static的.

 

 

現在我們可以明確確定一個對象的position屬性值了,不管它設不設這個屬性,我們都可以計算出這個屬性值.

 

回到原先的問題,如果一個對象設置了絕對定位,那它的定位參考對象就是它的所有祖先中,和它離的最近並且 postion屬性值不是static 的那個祖先.

 

總結完畢,下面有一個寫的測試,代碼有點亂.

 

 本文鏈接:  http://kino.iteye.com/blog/205528  轉載請註明出處,謝謝!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章