排版大法應用，Position的應用讓網頁元素錯位、不對稱
10個月前
網站排版太死板，希望有些特別的效果，錯位、不對稱可以讓網站看起來更特別
下面列出幾種移動元素位置的方式，文字浮現、圖片移動一點都不困難，掌握使用方式，可以再搭配自己的創意，讓你的網站品質升級！
CSS動畫係數
static
無定位(默認值)
元素按原順序排序，top, right, bottom, left 和 z-index 的屬性沒有效果
ex. position: static
relative
相對定位
元素按原順序排序，會因為top, right, bottom, left 和 z-index 的屬性變動自身定位，會以元素原本的位置來變動
ex. position: relative
absolute
絕對定位
元素不會按原順序排序，會因為top, right, bottom, left 和 z-index 的屬性，往上層一層一層找最靠近有除了(static)的定位為基準變動自身定位
ex. position: absolute
fixed
固定定位
元素不會按原順序排序，會因為top, right, bottom, left 和 z-index 的屬性以視窗為基準變動自身定位
ex. position: fixed
sticky
- 1-1 範例文字
- 1-2 範例文字
- 1-3 範例文字
- 1-4 範例文字
- 1-5 範例文字
第一章
- 2-1 範例文字
- 2-2 範例文字
- 2-3 範例文字
- 2-4 範例文字
- 2-5 範例文字
第二章
- 3-1 範例文字
- 3-2 範例文字
- 3-3 範例文字
- 3-4 範例文字
- 3-5 範例文字
第三章
黏性定位
元素按原順序排序，定位於有(relative)定位的滾輪區塊，滾動時如果top, right, bottom, left 和 z-index 的屬性達到指定位置時會黏在指定位置上，若有相同屬性的黏性定位，則看排序來決定顯示
ex. position: sticky