Position

Position(ポジション)では要素の位置を変更できます。ポジション ユーティリティの使い方の例を示します。

Common values

下記のように設定可能です。レスポンシブには未対応です。

<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>

Fixed top

viewportの上部に要素を配置します。(追加でCSSを必要がある場合もあります)

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

Fixed bottom

viewportの下部に要素を配置します。(追加でCSSを必要がある場合もあります)

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

Sticky top

スクロールした後, 要素をviewportの上部に配置。.sticky-top はCSSの position: sticky を使用しています。すべてのブラウザで完全にサポートされていはいません。

IE11 , IE10 では　position：sticky を position：relative レンダリングします。
スタイルを @support で囲み, 適切にレンダリングできるブラウザのみに上部固定を制限します。

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