ポジション

要素の位置をすばやく設定するには、これらのショートハンドユーティリティを使用します。

共通値

応答性の低いクイックポジショニングクラスがあります。

<div class="position-static">...</div>
<div class="position-relative">...</div>
<div class="position-absolute">...</div>
<div class="position-fixed">...</div>
<div class="position-sticky">...</div>

固定: 上部

ビューポートの先頭、端から端まで要素を配置します。プロジェクトで固定位置の含意を理解していることを確認してください。追加の CSS を追加する必要がある場合があります。

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

固定: 下部

ビューポートの最後尾、端から端まで要素を配置します。プロジェクトで固定位置の含意を理解していることを確認してください。追加の CSS を追加する必要がある場合があります。

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

固定: 上部 (スクロール後)

要素をビューポートの最上部に配置します。端から端に配置しますが、スクロールして要素を過ぎた後でのみ配置します。 .sticky-top ユーティリティは CSS の position: sticky を使用します。これはすべてのブラウザで完全にサポートされているわけではありません。

IE11 と IE10 は position: sticky を position: relative としてレンダリングします。 そのため、スタイルを @supports クエリでラップし、適正にレンダリングできるブラウザだけにスティッキーさを制限します。

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