Position

9. positionプロパティ

positionは要素の配置方法を決定します。
static（デフォルト）、relative（相対）、absolute（絶対）、fixed（固定）、sticky（スティッキー）の5種類があります。

🎮 Position 比較デモ
static
通常の流れ
relative
元の位置から移動
absolute
親からの絶対位置

relative の調整

0px
0px

absolute の調整

20px
20px 
.relative-box {
  position: relative;
  top: 0px;
  left: 0px;
}

.absolute-box {
  position: absolute;
  top: 20px;
  right: 20px;
}

position: sticky のデモ

stickyはスクロール時に「くっつく」動作をします。下のボックスをスクロールしてみてください。

📌 これがstickyヘッダー（スクロールしてもついてくる）

スクロールしてみてください...

Lorem ipsum dolor sit amet...

Consectetur adipiscing elit...

Sed do eiusmod tempor...

Ut labore et dolore magna...

Aliqua ut enim ad minim...

Veniam quis nostrud...

Exercitation ullamco...

Laboris nisi ut aliquip...

Ex ea commodo consequat...

Duis aute irure dolor...

In reprehenderit in voluptate...

📌 覚えておきたいポイント

  • static: デフォルト。top/left/right/bottom は効かない
  • relative: 元の位置を基準に移動。元の位置のスペースは残る
  • absolute: 最も近い position: relative な祖先を基準に配置
  • fixed: ビューポート（画面）を基準に固定
  • sticky: スクロール位置に応じて relative ↔ fixed が切り替わる
  • absolute要素は position: relative な親が必須！