Relative Position 之 Overlap
由於 Relative 是相對於原 Element 空間做 Shift,因此可能與其他 Element 有 Overlap,因此必須考慮其 Overlap 優先權。
由於 Relative 是相對於原 Element 空間做 Shift,因此可能與其他 Element 有 Overlap,因此必須考慮其 Overlap 優先權。
Fixed 與 Absolute 都會產生新 Layer,Relative 則維持在原本 HTML 內。
藉由 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 有什麼差異呢 ?