排版大法應用，Position的應用讓網頁元素錯位、不對稱
網站排版太死板，希望有些特別的效果，錯位、不對稱可以讓網站看起來更特別
下面列出幾種移動元素位置的方式，文字浮現、圖片移動一點都不困難，掌握使用方式，可以再搭配自己的創意，讓你的網站品質升級！
無定位(默認值)
元素按原順序排序，top, right, bottom, left 和 z-index 的屬性沒有效果
ex. position: static
position: static範例 -codepen
相對定位
元素按原順序排序，會因為top, right, bottom, left 和 z-index 的屬性變動自身定位，會以元素原本的位置來變動
ex. position: relative
position: relative範例 -codepen
絕對定位
元素不會按原順序排序，會因為top, right, bottom, left 和 z-index 的屬性，往上層一層一層找最靠近有除了(static)的定位為基準變動自身定位
ex. position: absolute
position: absolute範例 -codepen
固定定位
元素不會按原順序排序，會因為top, right, bottom, left 和 z-index 的屬性以視窗為基準變動自身定位
ex. position: fixed
position: fixed範例 -codepen
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
position: sticky範例 -codepen