🎨 CSS Position 属性の徹底解説

post-cover

positionについてまとめ

position 種類

  • static
  • absolute
  • relative
  • fixed

static

  • 何も指定しなければこれ
  • top, left などを指定しても効かない
  • z-index を指定しても効かない

relative

  • top, left などを指定できる
  • z-index を指定できる
  • z-index が効かなければ、relative にする

absolute

  • 親要素を基準とする
  • 基準としたい親要素にはrelativeを使用する。
  • relativeがない場合は、bodyタグが基準となる
  • top, left を指定できる
  • z-indexを指定できる

fixed

  • ウインドウ全体を基準とする
  • top, left を指定できる
  • z-indexを指定できる

Profile picture
michael ☻︎ 🇯🇵
Web Engineer(PHP/Laravel, Python/FastAPI/Flask, TypeScript/Vue/React, AWS/GCP, etc.) / Freelance /
Profile picture
michael ☻︎ 🇯🇵
Web Engineer(PHP/Laravel, Python/FastAPI/Flask, TypeScript/Vue/React, AWS/GCP, etc.) / Freelance /
FebMarAprMayJunJul
© 2024, PWE