CSS辞書

position: sticky

レイアウト・配置

スクロール位置に応じて、通常のフローとfixedの間で切り替わる配置方法です。指定した位置に到達するまで通常配置、到達後は固定されます。

構文

Syntax
position: sticky; top | right | bottom | left: <length>

Tailwindでは

一般形: sticky + top-{n}(top等の指定が必須)

クラス自体は position の項の sticky。効かないときは祖先の overflow を疑う。

コード例

1

position: sticky; top: 0;
実行結果
Sticky Header
Content 1
Content 2
Content 3
Content 4

上端に到達したら固定

2

position: sticky; top: 20px;
実行結果
Sticky Sidebar
Main Content
More Content

上から20pxの位置で固定

💡 TIPS

親要素にoverflow: hiddenがあると動作しない

🤖 AIがよく間違えるポイント

stickyが効かない三大原因は「祖先のoverflow: hidden/auto」「top等の閾値未指定」「親の高さ不足(貼り付く余地がない)」です。AIは症状からこの三択に絞り込めないことが多いので、原因調査はこの順で依頼すると速いです。table のヘッダー行(th)にも使える点は意外と知られていません。

💬 AIへの頼み方

このposition: stickyが効かない原因を、祖先のoverflow・閾値・親の高さの3点から順に調査して

テーブルのヘッダー行をスクロールで固定して。stickyをthに使う方法で

そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。

関連プロパティ

ブラウザサポート

Baseline 広く利用可能
Chrome
56+
Firefox
32+
Safari
13+
Edge
16+