Bootstrap4.xの使い方をBootstrap3.xからの変更箇所を交えて解説しています。
位置ユーティリティ(Position) v4.0.0新設
要素の位置をすばやく設定するには、これらの短縮形ユーティリティを使用。
共通の値(Common values)v4.0.0新設
位置ユーティリティクラスで迅速に設定可能だが、レスポンシブには未対応。
設定例
<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>
【設定】
- 通常の位置(
position: static
):.position-static
- 相対位置(
position: relative
):.position-relative
- 絶対位置(
position: absolute
):.position-absolute
- 固定位置(
position: fixed
):.position-fixed
- Sticky位置(
position: sticky
):.position-sticky
最上部に固定(Fixed top)
ビューポートの上部に、端から端まで要素を配置。プロジェクトの固定位置の影響を理解していることを確認すること。追加CSSを追加する必要がある場合もあり。
設定例
<div class="fixed-top">...</div>
【設定】
- 要素に
.fixed-top
を入れることで、その要素を画面の最上部に固定(ナビゲーションバーの固定などで使用)
最下部に固定(Fixed bottom)
ビューポートの下部に、端から端まで要素を配置。プロジェクトの固定位置の影響を理解していることを確認すること。追加CSSを追加する必要がある場合もあり。
設定例
<div class="fixed-bottom">...</div>
【設定】
- 要素に
.fixed-bottom
を入れることで、その要素を画面の最下部に固定(ナビゲーションバーの固定などで使用)
最上部に達すると固定(Sticky top)
スクロールした後、要素をビューポートの上部に端から端に配置。.sticky-top
ユーティリティはCSSの position: sticky
を使用。これはすべてのブラウザで完全にサポートされていない。
IE10とIE11は position:sticky
を position:relative
としてレンダリング。そのためスタイルを @support
クエリで囲み、適切にレンダリングできるブラウザのみに上部固定を制限。
設定例
<div class="sticky-top">...</div>