FixedとStickyによる配置
要素をビューポートに固定するか、スクロールに追従するヘッダーやサイドバーを作成します。
「FixedとStickyによる配置」はCoddyKit上の無料CSS Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはCSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 CSS Academyコースには全4レッスンが含まれています。
position: fixed
fixed要素はブラウザーのビューポートを基準に配置され、ページをスクロールしても同じ位置に留まります。また、ドキュメントフローからも除外されます。
<div class="sticky-nav">Fixed navigation bar</div>
<p>Scroll content below the fixed nav...</p>
fixedの用途
position: fixed の一般的な用途は次のとおりです。
- 上部に固定するナビゲーションバー
- フローティングアクションボタン（FAB）
- 右下に配置するチャットウィジェット
- Cookie同意バナー
- モーダルオーバーレイ
固定ヘッダーへの対応
固定ヘッダーは、その下のコンテンツに重なります。コンテンツを下へ押し下げるには、ヘッダーの高さと同じ値の上パディングまたは上マージンを追加します。
<div class="nav">Fixed Header (64px)</div>
<p>Page content starts safely below the header thanks to padding-top.</p>
親要素のtransformとfixed
重要な注意点があります。親要素にCSSの transform、perspective、または filter が適用されている場合、fixed配置はビューポートではなく、その親要素を基準にします。これはよくあるバグの原因です。
position: sticky
position: sticky は、通常どおりスクロールして定義したしきい値（例：top: 0）に達すると、親コンテナ内でその位置に固定されるという、ハイブリッドな配置方法です。
<div class="table-header"><table><thead><tr><th>Name</th><th>Score</th></tr></thead><tbody><tr><td>Row 1</td><td>10</td></tr><tr><td>Row 2</td><td>20</td></tr><tr><td>Row 3</td><td>30</td></tr><tr><td>Row 4</td><td>40</td></tr><tr><td>Row 5</td><td>50</td></tr></tbody></table></div>
stickyにはスクロール可能な親要素が必要
sticky要素は包含ブロック内で固定されます。親要素の高さがスクロールできるほどなければ、stickyは効果を持ちません。親要素の overflowにはhiddenを設定しないでください。
stickyのTop、Right、Bottom、Left
stickyを有効にするには、少なくとも1つのオフセットを定義する必要があります。一般的なパターンは次のとおりです。
<div class="header">Sticky Header</div>
<div class="sidebar">Sticky Sidebar</div>
<div class="footer">Sticky Footer</div>
固定されるテーブルヘッダー
stickyは、スクロール可能なテーブルラッパー内のテーブルヘッダーに最適です。ユーザーが行をスクロールしても、ヘッダーが表示されたままになります。
<div class="table-wrapper"><table><thead><tr><th>Product</th><th>Price</th></tr></thead><tbody><tr><td>Apple</td><td>$1</td></tr><tr><td>Bread</td><td>$3</td></tr><tr><td>Milk</td><td>$2</td></tr><tr><td>Eggs</td><td>$4</td></tr><tr><td>Cheese</td><td>$5</td></tr></tbody></table></div>
固定されるサイドバーのパターン
メインコンテンツをスクロールしても表示領域に留まる、典型的なstickyサイドバーです。
<div class="layout"><div class="sidebar">Sticky sidebar content</div><div class="main">Main scrolling content area with lots of text to scroll through.</div></div>
FixedとStickyのまとめ
主な違いは次のとおりです。
- Fixed：常にビューポートを基準にし、常にフローの外にあります
- Sticky：しきい値まではコンテンツとともにスクロールし、フロー内に留まり、親要素の境界で停止します
パフォーマンス：Fixedとレイヤー
fixed要素は新しいスタッキングコンテキストを作成します。また、再描画領域と重なる場合、スクロール時にレイアウトが発生することがあります。fixed要素はシンプルに保ち、box-shadow のような負荷の高いプロパティの使用を避けてください。
理解度チェック
position: fixed にはなく、position: sticky にある制約は何ですか。
まとめ
position: fixed は要素をビューポートに固定し、固定ナビゲーションやオーバーレイに使用できます。position: sticky はしきい値までは通常どおりスクロールし、その後固定されます。テーブルヘッダーやサイドバーに最適です。どちらも、固定を有効にするには少なくとも1つのオフセットプロパティが必要です。
よくある質問
「FixedとStickyによる配置」レッスンは無料ですか？
はい。「FixedとStickyによる配置」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 CSS Academyコースには全4レッスンが含まれています。
「FixedとStickyによる配置」で何を学びますか？
要素をビューポートに固定するか、スクロールに追従するヘッダーやサイドバーを作成します。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
CSS Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのCSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「FixedとStickyによる配置」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このCSS Academyレッスンでコードを書いて実行できますか？
はい。すべてのCSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- StaticとRelativeによる配置
- Absolute配置とContaining Block
- FixedとStickyによる配置
- Z-indexとスタッキングコンテキスト