Position

有關 Position, Direction 與 Z-Index 的通用類別。

Position

position Breakpoints

設定各種元素與組件的 Position 型態。使用類別名稱為 .u-pos{@bp}:。可針對不同斷點範圍選擇不同值。

  • .u-pos{@bp}:sta: static
  • .u-pos{@bp}:fix: fixed
  • .u-pos{@bp}:abs: absolute
  • .u-pos{@bp}:rel: relative
  • .u-pos{@bp}:sti: sticky
<div class="u-pos:abs"></div>

Direction

top left bottom right

設定四個方位的通用類別,包含 Top .u-top:, Left .u-left:, Bottom .u-bottom: 與 Right .u-right:

每個方位都能使用以下數值:

  • 0
  • 50%
  • 100%
  • init
  • auto
<div class="u-pos:abs u-top:0 u-left:0"></div>

Z-Index

z-index

設定圖層數值的通用類別。使用類別名稱前綴詞為 .u-zindex:

可使用以下數值:

  • -1
  • 0
  • 10
  • 100
  • 1000
  • 10000
<div class="u-pos:abs u-top:0 u-left:0 u-zindex:-1"></div>