使用 Absolute Position 實現 Layout
藉由 Absolute Position 與 top、bottom、left 、right 與 margin: auto 靈活運用,可以排出很多特殊 Layout。
藉由 Absolute Position 與 top、bottom、left 、right 與 margin: auto 靈活運用,可以排出很多特殊 Layout。
使用 Absolute Position 時搭配 top、bottom、left 與 right 定位時,會往父層尋找具備定位設定的父層。
實務上常遇到一些不規則水平置中需求,如一個為水平置中,另一個卻水平靠右。
Absolute Position 與 Fixed Position 非常類似,但還是有不少特性不太一樣。
蓋板廣告是 Fixed Position 常見應用,本文簡單介紹其實踐方式。
Block Element 預設會以 width: 100% 佔據父層 Box 所有寬度,這使得 margin: auto 無用武之地,可使用 width: fit-content 將寬度收縮成 Content 寬度,讓 margin: auto 能水平置中。
對 Element 設定 width 很直覺,但 RWD 出現後,width 就面臨的重大挑戰,因此出現了 max-width,但這兩者有什麼差異呢 ?
很多人以為 width 預設值是 100%,但事實上是 auto,而 100% 與 auto 有什麼差異呢 ?
藉由 Fixed Position 與 top、bottom、left 、right 與 margin: auto 靈活運用,可以排出很多特殊 Layout。
實務上常看到的蓋板廣告、回到頁面頂端,固定顯示在頁面的 Navbar … 等,都是使用 Fixed Position 實現。