[第六週] CSS Part4 - Position 定位


static

是所有元素的預設值

relative

設定 top、 bottom、 left、 right,可調整元素出現在相對於原本應該出現的位置上,但不會動到其他元素的位置。

 position:relative;
 top:20px;
 left:-40px;

fixed

相對於瀏覽器做定位,更精確地說是相對於 viewport 做定位。
加上這個參數後,瀏覽器移到哪裡,都會固定出現在一樣的地方。

absolute

網上找不是 static 的元素,即為參考點。
加上 absolute 後,會從原本正常排列裡排除,下一個元素會遞補上來原本正常排列裡的位置。

z-index 決定圖層順序

數值越大,排越前面

sticky

會依照參數值而使元素黏住不動,像是手機裡的通訊錄,滑到 A 開頭的姓名時,A 會固定不動,移到 B 時,換 B 會固定在上面。

#static #relative #position #absolute #fixed #z-index #sticky






你可能感興趣的文章

Web Monetization 簡介

Web Monetization 簡介

MTR04_0628

MTR04_0628

[Release Notes] 20210813_v1 - Support add Post canonical url

[Release Notes] 20210813_v1 - Support add Post canonical url






留言討論