HTML/CSSを勉強していて、最初は意味を理解するのが難しかったものの一つがpositionです。

架空サイトを作っているときに、

position: relative;

や

position: absolute;

を使う場面がありました。

なんとなく、

「親要素を基準にして、子要素を動かすもの」

というイメージで使っていました。

でも、今回あらためて振り返ってみると、

「relativeって、自分自身も動かせるんだ！」

という新しい発見がありました。

今回は、実際にサイト制作で使った経験を振り返りながら、positionについて整理してみます。

positionって何？
top・right・bottom・left
なぜ親にrelativeを指定するの？

positionって何？

positionは、要素の配置方法を指定するCSSプロパティです。

私が最初に覚えたのは、

「子要素を動かしたいときの基準になるもの」

というイメージでした。

例えば、

.parent {
  position: relative;
}

.child {
  position: absolute;
}

という組み合わせです。

この場合、parentを基準としてchildを配置することができます。

ただし、今回勉強してみて、relativeにはもう一つ重要な役割があることを知りました。

position: relative

relativeは、要素の元々の位置を基準にして配置できる指定です。

そして、absoluteで配置する子要素の基準としても使われます。

例えば、

.box {
  position: relative;
}

とすると、box自身は見た目上ほとんど変化しません。

そのため最初は、

「relativeは基準になるだけなのかな？」

と思っていました。

でも、

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

とすると、box自身を移動させることができます。

つまり、

position: relativeは基準になるだけではなく、自分自身も移動できる。

ということが今回の発見でした。

top・right・bottom・left

positionと一緒によく使うのが、

top
right
bottom
left

です。

例えば、

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

とすると、元の位置を基準に、

上から20px
左から30px

という方向に移動します。

relativeの場合は、元々あった位置を基準にして移動すると考えると分かりやすそうです。

position: absolute

次は、

position: absolute;

です。

absoluteは、通常のレイアウトの流れから外れて、基準となる要素を基準に配置することができます。

よく使われるのが、

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 20px;
  left: 30px;
}

という組み合わせです。

この場合は、

childをparentを基準にして、上から20px、左から30pxの位置に配置する

というイメージです。

なぜ親にrelativeを指定するの？

ここも最初は、

「absoluteを指定したら動かせるんだから、それだけでいいのでは？」

と思っていました。

でも、子要素を「この親を基準にして配置したい」という場合は、親要素に、

position: relative;

を指定します。

すると、

親要素
┌─────────────────────┐
│                     │
│      子要素          │
│                     │
└─────────────────────┘

という親子関係の中で、子要素の位置を調整しやすくなります。

そのため、

relative＝基準を作る

absolute＝その基準をもとに配置する

という組み合わせで覚えると分かりやすいと感じました。

relativeとabsoluteの違い

ここまでを一度整理してみます。

指定	特徴
`position: relative`	元の位置を基準に自分自身を移動できる。absoluteの基準としても使われる
`position: absolute`	通常のレイアウトの流れから外れて、基準となる要素をもとに配置する

最初は、

「relativeとabsoluteはセット」

という覚え方をしていました。

もちろん一緒に使うことは多いですが、relative自身も移動できるということを今回知ることができました。

架空サイトでは画像を重ねるために使った

実際に架空サイトを作っているとき、positionを使ったのがAbout部分です。

画像をただ横に並べるのではなく、画像同士を重ねるようなデザインにしました。

そのとき、

.about-imggroup {
  position: relative;
}

のように、画像を配置するグループを基準にして、画像を配置しました。

このような場面では、Flexboxで横並びにするよりも、

「この場所を起点にして、この画像をここに置きたい」

という指定がしやすくなります。

画像を重ねることで、単純に画像を並べるよりも、少しデザイン性のある見た目にすることもできました。

実際にサイトを作ってみたことで、

「positionってこういうときに使うんだ！」

とイメージしやすくなりました。

position: fixed

positionには、relativeやabsolute以外にも種類があります。

その一つが、

position: fixed;

です。

これは、画面を基準にして要素を固定するときに使います。

例えば、

header {
  position: fixed;
  top: 0;
}

とすると、スクロールしても画面上部に表示し続けるヘッダーなどを作ることができます。

私自身、fixedは実際に使ったことがあり、

「画面についてくるもの」

というイメージを持っていました。

position: sticky

もう一つが、

position: sticky;

です。

stickyは「粘着する」という意味があります。

fixedのように最初から画面に固定されているのではなく、

通常の位置にある要素が、スクロールによって指定した位置まで来ると、そこに張り付く

というような動きをします。

例えば、

header {
  position: sticky;
  top: 0;
}

とすると、スクロールしてtop: 0の位置まで来たときに、そこに張り付くような動きをさせることができます。

fixedとstickyの違い

fixedとstickyは似ていますが、動き方が違います。

	`fixed`	`sticky`
最初の状態	画面に固定される	通常の位置にある
スクロール	画面に固定されたまま	指定位置まで来ると張り付く
イメージ	最初から画面にくっついている	スクロールしてきたらくっつく

ざっくり、

fixed → 最初から画面に固定

sticky → スクロールしてきたら張り付く

と考えると分かりやすそうです。

ただ、stickyは親要素などの範囲にも影響されるため、fixedよりも少し動きを理解する必要がありそうです。

私はまだstickyを実際のサイト制作では使ったことがないので、今後使う機会があれば試してみたいと思います。

positionを使うときに考えること

今回勉強してみて、positionを使うときは、

「何を基準にして、どこに配置したいのか？」

を考えることが大切だと分かりました。

例えば、

元の位置を基準に少し動かしたい → relative
基準となる要素をもとに配置したい → absolute
画面に固定したい → fixed
スクロールしてきたら張り付かせたい → sticky

というように、それぞれ役割があります。

今回の振り返りで分かったこと

今回、最初に自分の理解を整理してみたとき、

「positionは親要素を基準にして子要素を動かすもの」

というイメージで覚えていました。

でも、振り返ってみると、それだけではありませんでした。

特に大きかった発見が、

position: relativeでも要素自身を動かせる

ということです。

実際にコードを書いているときは、動けばOKとして先に進んでしまうことがあります。

でも、あとから

「このコードって何をしているんだろう？」

と振り返ってみると、今まで知らなかったことに気づくことがあります。

今回も、サイトを作ったときにはなんとなく使っていたpositionについて、あらためて整理することで理解が深まりました。

まとめ

今回はpositionについて整理しました。

relative → 元の位置を基準に自分自身を移動できる。absoluteの基準としても使える
absolute → 通常のレイアウトの流れから外れて、基準となる要素をもとに配置する
fixed → 画面を基準に固定する
sticky → スクロールして指定位置まで来ると張り付く

特に、

「position＝親要素を基準に子要素を動かすもの」だけではない

ということが、今回の一番の発見でした。

これからも、ただコードを書いて終わりにするのではなく、

「実際に作る → つまずく → 振り返る → 自分の言葉で整理する」

という流れを大切にしながら勉強していきたいと思います。

次は、実際に架空サイトをどのように作ったのか、制作の流れについてまとめていきます。