great-good-loading-dog

鬼谷設計

GREAT GOOD DESIGN

排版大法應用,Position的應用讓網頁元素錯位、不對稱

1年前

網站排版太死板,希望有些特別的效果,錯位、不對稱可以讓網站看起來更特別

下面列出幾種移動元素位置的方式,文字浮現、圖片移動一點都不困難,掌握使用方式,可以再搭配自己的創意,讓你的網站品質升級!

CSS動畫係數

static

無定位(默認值)

元素按原順序排序,top, right, bottom, left 和 z-index 的屬性沒有效果

ex. position: static

position: static範例 -codepen

relative

相對定位

元素按原順序排序,會因為top, right, bottom, left 和 z-index 的屬性變動自身定位,會以元素原本的位置來變動

ex. position: relative

position: relative範例 -codepen

absolute

絕對定位

元素不會按原順序排序,會因為top, right, bottom, left 和 z-index 的屬性,往上層一層一層找最靠近有除了(static)的定位為基準變動自身定位

ex. position: absolute

position: absolute範例 -codepen

fixed

固定定位

元素不會按原順序排序,會因為top, right, bottom, left 和 z-index 的屬性以視窗為基準變動自身定位

ex. position: fixed

position: fixed範例 -codepen

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

position: sticky範例 -codepen