CSS position:sticky ジェネレーター

position:stickyのCSSコードを生成し、ライブプレビューで動作を確認できます。

固定位置

オフセット: 0px

scroll-margin: 0px

スクロール時のマージン（アンカーリンク時に便利）

z-index: 10

幅

背景色（プレビュー用）

生成されたCSS

position: sticky;
top: 0px;
z-index: 10;
width: 100%;

ライブプレビュー

スクロールして確認してください

Sticky要素

スクロールするとtopから0pxの位置に固定されます

コンテンツブロック 1

コンテンツブロック 2

コンテンツブロック 3

コンテンツブロック 4

コンテンツブロック 5

コンテンツブロック 6

コンテンツブロック 7

コンテンツブロック 8

コンテンツブロック 9

コンテンツブロック 10

CSS position:sticky とは？

position:sticky は、要素を通常のフローに配置しつつ、スクロール時に指定した位置に固定する CSS プロパティです。