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，版面就會以那一層為主。
如圖片說明，如果我們在DOM上設定了position:relative; 那麼被他包住的DOM，就可以設定position: absolute; 去隨意調位置了。
使用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，版面就會以那一層為主。
如圖片說明，如果我們在DOM上設定了position:relative; 那麼被他包住的DOM，就可以設定position: absolute; 去隨意調位置了。
留言