CSS positionプロパティジェネレーター
static・relative・absolute・fixed・stickyの5種類のpositionをGUIで切り替え、top/right/bottom/left・z-indexの効果をリアルタイムのプレビューで確認しながらCSSコードを生成できる無料ツール。
使い方のヒント
- position: relativeにしてtop/leftを設定すると、Box Bが本来の位置から見た目だけずれます。Box C（後の要素）の位置は変わらない点に注目してください。
- position: absoluteまたはfixedに切り替えると、Box Bが通常のフローから完全に外れるため、直後のBox Cがその分だけ詰めて配置される様子が確認できます。
- z-indexは複数の要素が重なったときの重なり順を決めますが、position: staticの要素には効果がありません。「z-indexを指定する」を試す前にpositionを変えてみてください。
- position: stickyはスクロール可能なコンテナの中でのみ効果を発揮します。プレビュー枠を実際にスクロールして、途中で固定される様子を確認してください。
- 生成されたCSSコードはコピーしてそのまま自分のスタイルシートに貼り付けられます。実際のページでも同じ見た目になるか確認してみましょう。
よくある質問
余談ですが ― position: stickyが標準化されるまでの道のり
CSSのposition プロパティは古くからstatic・relative・absolute・fixedの4種類が存在していましたが、「スクロールに応じて途中から固定される」ヘッダーやサイドバーを実現するには、長らくJavaScriptでスクロールイベントを監視し、position: fixedへの切り替えを手動で行うしかありませんでした。CSSだけで完結する仕組みは存在しなかったのです。
position: stickyの構想自体は2012年頃からCSSの仕様（CSS Positioned Layout Module Level 3）に盛り込まれていましたが、実装が難しく、SafariがWebKitのベンダープレフィックス付き（-webkit-sticky）で先行実装したのが2013年頃でした。Chromeが標準のstickyキーワードに対応したのは2017年で、Firefoxを含む主要ブラウザで安心して使える状態になったのはさらに数年後の2020年前後のことです。
position: stickyの「途中で固定される」挙動は、実装上はrelativeとfixedのハイブリッドとして説明されます。通常はrelativeとして通常のフローに従い、スクロール位置が指定したオフセットに達すると、その場でfixedに切り替わったかのように振る舞います。この切り替えが親要素のスクロール範囲内でしか発生しない点が、意図せずstickyが「効かない」と感じる原因の多くを占めています。
現在ではテーブルの見出し行を固定する・目次をスクロールに追従させるなど、stickyはWebデザインの定番テクニックとして広く使われています。JavaScriptによるスクロール監視が不要になったことは、パフォーマンスとコードの単純さの両面で大きな進歩でした。