ポジション

Position

ヘルパーを使用して、要素の位置を設定します。

項目

Fixed top

ビューポートの上部に要素を端から端まで配置します。CSSを追加する必要がある場合もありますので、プロジェクトにおける固定位置の影響を理解しておいてください。

<div class="fixed-top">...</div>

Fixed bottom

ビューポートの下部に、端から端まで要素を配置します。CSSを追加する必要がある場合もありますので、プロジェクトにおける固定位置の影響を理解しておいてください。

<div class="fixed-bottom">...</div>

Sticky top

ビューポートの上部に要素を端から端まで配置するが、スクロールして通過した後でなければ、その要素は配置されない。

<div class="sticky-top">...</div>

Responsive sticky top

.sticky-topユーティリティには、レスポンシブなバリエーションも存在します。

<div class="sticky-sm-top">Stick to the top on viewports sized SM (small) or wider</div>
<div class="sticky-md-top">Stick to the top on viewports sized MD (medium) or wider</div>
<div class="sticky-lg-top">Stick to the top on viewports sized LG (large) or wider</div>
<div class="sticky-xl-top">Stick to the top on viewports sized XL (extra-large) or wider</div>
<div class="sticky-xxl-top">Stick to the top on viewports sized XXL (extra-extra-large) or wider</div>

Sticky bottom

ビューポートの最下部、端から端まで、スクロールして通過した後にのみ、要素を配置します

<div class="sticky-bottom">...</div>

Responsive sticky bottom

.sticky-bottomユーティリティには、レスポンシブなバリエーションも存在します。

<div class="sticky-sm-bottom">Stick to the bottom on viewports sized SM (small) or wider</div>
<div class="sticky-md-bottom">Stick to the bottom on viewports sized MD (medium) or wider</div>
<div class="sticky-lg-bottom">Stick to the bottom on viewports sized LG (large) or wider</div>
<div class="sticky-xl-bottom">Stick to the bottom on viewports sized XL (extra-large) or wider</div>
<div class="sticky-xxl-bottom">Stick to the bottom on viewports sized XXL (extra-extra-large) or wider</div>