2009年9月8日 星期二

absolute 和 relative 比較

absolute 是絕對定位
他是參照瀏覽器的左上角,配合 TOP 、 RIGHT 、 BOTTOM 、 LEFT (下面簡稱 TRBL )進行定位,在沒有設定 TRBL ,依據父級的做標原始點為原始點。如果設定 TRBL 並且父級沒有設定 position 屬性,那麼當前的 absolute 則以瀏覽器左上角為原始點進行定位,位置將由TRBL決定。

ex:position:absolute; 沒有指定 TRBL , width:200px;height:200px ,他的父級為 table(table 沒被撐開)
table
div
   
   
   


relative 是相對定位
他是參照父級的原始點為原始點,無父級則以 BODY 的原始點為原始點,配合 TRBL 進行定位,當父級內有 padding 等 CSS 屬性時,當前級的原始點則參照父級內容區的原始點進行定位。
ex:position:relative; 沒有指定 TRBL , width:200px;height:200px ,他的父級為 table (table 被撐開)
table
div
   
   
   


引用:解讀 Absolute 與Relative CSS 定位問題

沒有留言:

張貼留言