CSS Positionビジュアライザー
5つのposition値を切り替えて配置の変化を確認。top/left/bottom/rightをスライダーで調整してCSSをコピーできます
position
relative
CSS
.element {
position: relative;
top: 0px;
left: 0px;
z-index: 1;
}使い方
- position ボタンで値を切り替えてみよう（relative / absolute / fixed / sticky）
- top・left・bottom・right のスライダーを動かして対象要素（teal）の位置を確認しよう
- 「📋 CSSをコピー」ボタンでコードをコピーして、自分のスタイルシートに貼り付けよう！
absolute と relative の違い、説明できる？
CSS の position は「何を基準に配置するか」を決めるプロパティ。
でも relative と absolute の違いを正確に説明できる人は意外と少ない。
- static — デフォルト。通常のフロー通りに配置。top/left は効かない。
- relative — 元の位置を基準にずらす。元の場所は空いたまま残る。
- absolute — 最も近い position:relative/absolute/fixed の親を基準に配置。フローから外れる。
- fixed — ビューポート（画面）を基準に固定。スクロールしても動かない。
- sticky — 普段は relative、スクロールで指定位置に達すると fixed になる。
このビジュアライザーで各値を切り替えると、要素の動きが即座に変わる。 「absolute にしたら親の左上に飛んだ」「relative にしたら元の位置からずれた」という違いを体感しよう。
レイアウトでの使いどころ
- カード右上のバッジ — 親カードを
relative、バッジをabsolute+top: -8px; right: -8pxで配置。通知数やNEWラベルに。 - 固定ヘッダー —
position: fixed; top: 0でスクロールしても常に画面上部に表示。ナビゲーションバーの定番。 - 目次の追従 —
position: sticky; top: 80pxでスクロールに追従する目次。ブログ記事のサイドバーでよく見る。
よくある質問
- Q. absolute にしたら要素が画面の左上に飛んでしまう
- 親要素に
position: relativeが指定されていないのが原因。absolute は「最も近い positioned な祖先」を基準にするので、どの祖先にも position がなければ body 基準になる。 - Q. sticky が効かないのはなぜ？