position: sticky

レイアウト・配置

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

構文

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

コード例

例 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があると動作しない

関連プロパティ

ブラウザサポート

Modern browsers