position: stickyとは？
position: stickyの基本的な役割と特徴
position: stickyは、要素をスクロールに応じて「通常のフローに従いつつ、特定の位置で固定できる」CSSのプロパティです。
ナビゲーションバーやサイドバーをスクロールに応じて固定したい場合に便利です。
position: fixedやabsoluteとの違い・fixed → 常に画面の同じ位置に固定される（ページ全体に対して適用）・absolute → 通常のレイアウトフローから外れ、親要素を基準に固定される・sticky → 通常のレイアウトに従うが、特定の位置を超えたら固定される
position: stickyの活用シーン- ナビゲーションバーの固定
- サイドバーをスクロール時に固定
- テーブルのヘッダー（
thead）をスクロール時に固定
例：スクロールしても常に上部に固定されるヘッダー
.header {
position: sticky;
top: 0;
left: 0;
background: white;
z-index: 1000;
}position: stickyが効かない原因と対処法
1. 親要素にoverflow: hidden;が設定されている
position: sticky は、親要素に overflow: hidden; や overflow: auto; があると機能しません。overflow を設定すると、sticky の「固定する基準」が制限されるため、意図した動作になりません。
親要素の overflow を visible に変更する
.parent {
overflow: visible; /* hidden や auto を使わない */
}2.top, bottom, left, rightの指定がない
position: sticky は、どの位置で固定するかの指定が必須（top, bottom, left, right のどれか）です。
これがないと、通常のrelativeのように動作してしまいます。
固定位置を指定する（例：top: 0; で上部固定）
3. display: flex;の子要素だとstickyが効かない
stickyの要素がdisplay: flexの子要素の場合、意図した動作にならないことがあります。
親要素のalign-items: stretchの影響でstickyが正しく動作しないこともあります。
align-self: flex-start;を指定してstickyを効かせる
.parent {
display: flex;
}
.child {
position: sticky;
top: 10px;
align-self: flex-start;
}4.position: stickyの要素がoverflow: auto;のコンテナ内にある
スクロールのある親要素（overflow: auto;）の中にstickyを適用しても、スクロールの影響を受けて固定されないことがある。
親要素のoverflowをvisibleにする。
もしくは sticky の親要素を見直し、ページ全体のスクロールに依存させる
.scroll-container {
overflow: visible;
}5.position: stickyの対象要素がtableのtdやthの中にある
tableのthやtdにposition: sticky;を適用すると、思ったように動作しないことがある。
theadにposition: sticky;を適用する
またはthをdisplay: block;にする（ただし、テーブルのデザインが崩れる可能性があります）
thead {
position: sticky;
top: 0;
background: white;
}position: stickyを正しく動作させるためのチェックリスト
実際に試してみよう
「position: sticky が効かない理由と対策」がわかったら、次は 実際にコードを書いて試してみましょう！
以下のコードでHTMLファイルを作成して、自分の環境で試してみてください！
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stickyテスト</title>
<style>
.container {
height: 1500px;
padding: 20px;
}
.sticky {
position: sticky;
top: 0;
background: lightblue;
padding: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="sticky">私はスクロールすると固定されます</div>
<p>スクロールしてみてください。</p>
</div>
</body>
</html>💡 Stickyの動作を試しながら、コードをカスタマイズしてみましょう！
コメント