ポジションとは

CSSのpositionプロパティは、HTML要素を自由に配置するために使います。

この4つの値はよく使うので使いこなせるようになりましょう!!

  • static(デフォルト)
  • relative(相対配置)
  • absolute(絶対配置)
  • fixed(固定配置)

それでは、それぞれの例を見ていきましょう

relative(相対配置) & absolute(絶対配置)

基本的にrelativeとabsoluteはセットで使うことで要素を自由な位置に配置することができます。

STEP1
親要素に”relative”を指定します。

relativeを指定することで、子要素を配置するための基準になります。

STEP2
子要素に”absolute”を指定します。

absoluteを指定することで、自由に配置する準備ができました。

STEP3
位置を指定する

親要素の左上を基準に、子要素にtop, right, bottom, leftの値を指定して位置を自由に調整しましょう。

fixed(固定配置)

“fixed”を指定すると、画面をスクロールしても指定した位置に固定することができます。

ヘッダーやサイドバーの固定するときなどに使います。

top, right, bottom, leftを指定することで位置を調整することもできます。