固定レイアウト

固定レイアウトを使うと、コンテンツを画面の上に固定して表示できます。

.relative

relative は、CSS position: relativeを適用するクラスです。

fix

fix は、CSS position: fixedを適用するクラスです。

.fix-{vertical}-{horizontal}-{level} という記法になっており、
{vertical}はtopまたはbottom、 {horizontal}はleftまたはright、 {level}は0から5までの数値を指定できます。

abs

abs は、CSS position: absoluteを適用するクラスです。

.fix-{vertical}-{horizontal}-{level} という記法になっており、
{vertical}はtopまたはbottom、 {horizontal}はleftまたはright、 {level}は0から5までの数値を指定できます。

sticky

sticky は、CSS position: stickyを適用するクラスです。

.fix-{vertical}-{level} という記法になっており、
{vertical}はtopまたはbottom、 {level}は0から5までの数値を指定できます。

例 (abs)

<div class="card" style="position: relative; max-width: 320px; height: 240px">
  <button class="btn primary abs-bottom-right-3">
    確定
  </button>
</div>

例 (fix)

右下に表示されているボタンが例です。

<button class="btn primary fix-bottom-right-3">
  fixの例
</button>