📝

【CSS】positionの基本まとめ

に公開
CSS
HTML
tech

✅position: static（デフォルト）

特に位置指定しない通常のレイアウト

✅position: relative

・親要素に指定
・「自分の本来の位置」を基準に、top / left などで調整できる
　→absolute みたいにレイアウトの流れから外れない
　→その場に見えない“影”が残るイメージ
・主な使い所は「子要素をabsoluteで配置するための基準」にすることが多い
・子要素の absolute の基準になる（←めっちゃ重要）

css

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 0;
  left: 0;
}

✅position: absolute

・直近のrelativeを持つ親を基準に絶対配置
（※一番近い position: relative | absolute | fixed | sticky を持つ親要素が基準）
・親がrelativeじゃないと、bodyが基準になる

✅position: fixed

・ビューポート（画面全体）を基準に固定（スクロールしても動かない）
・例：戻るボタン、ヘッダー固定など

✅position: sticky

・スクロールに応じて動くが、ある位置で固定される
・要素の親にoverflow: hiddenがあると効かないので注意

💡Point
　・最初は通常のフロー（relativeみたいに自分の位置）にいて、
　　スクロールして一定位置に来ると固定（fixedみたいな動き）になる。
　・基準は、親要素のスクロール領域。

✅z-index

・要素の「重なり順」を制御
・position が relative / absolute / fixed / sticky の時のみ有効

css

.element {
position: relative;
z-index: 10;
}

Discussion