2012年3月7日 星期三

CSS的position

position我稱他為css排版的大絕招,如果你不懂DOM inline跟box的差別,常常用了float就讓網頁排版整個毀掉,只要你搞懂position,你就可以照你的意思隨意排版了,不過我用的時候也是很謹慎,這點就有機會排一些比較複雜的版面就會了解了。

使用position後有幾個屬性可以設:
static: 預設值,不特別設的時候就是這個,如果因為網頁已經繼承的讓版面跑掉,就再把position設回就好。
absolute: 網頁內的絕對位置,如果上層的DOM沒有position: relative; 屬性,則絕對位置是對於網頁整體而言,比方設top:0; left:0; 就會在網頁的左上角。此外設了absolute後DOM會從網頁被挖出來,後面的DOM會自動填補上去。
relative: 網頁內的相對位置,是相對於DOM原本的位置,DOM並不會從網頁被挖出來。
fixed: 固定於瀏覽器的某個位置,DOM也會被挖出來,有時候看到不管網頁怎麼捲動,都會有一個東西固定在那邊,就是設定了fixed。

此外設了position後,除了static外,就可以再做另外的設定,初學者常以為直接給位置或z-index就可以改變位置,但記住一定要先設position。
top, left, bottom, right: 設定位置,left跟right設定一個就好,bottom跟top也是相對的,可以設負值會很有彈性。
z-index: 如果DOM有重疊,可以決定哪個在上,數字越大在越上層。

另外說明position最好用的地方,absolute並非一定得相對於網頁整體,而是相對於他的父輩DOM的relative,如果他的父輩DOM有設定relative,版面就會以那一層為主。
423071_3363368852815_1584158705_n
如圖片說明,如果我們在DOM上設定了position:relative; 那麼被他包住的DOM,就可以設定position: absolute; 去隨意調位置了。
反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...