排版大法應用,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