【CSS】positionをマスターしよう！

こんにちわ！社員Tです。

日々のコーディング業務で、頻繁に使用するCSS・positionプロパティ。
要素を自分の思うままにブラウザ上で動かす事ができる便利なプロパティですね！しかし、適切な理解と知識がないと思いもよらない場所に飛んでいってしまいます。
自身も学習中は、よくpositionの沼にハマってしまった一人です・・。
そこで、今回は今一度学び直す意味も込めてご覧いただいている皆さんと一緒にpositionについて学び直していこうと思います！

positionって？

positionプロパティとは、要素に対し基準位置からの配置位置を指定するときに用いられるプロパティです。

主な目的としては、

1. 要素を指定した分だけ動したいとき
2. 要素の上に別の要素を重ねたいとき
3. 要素を画面の常に同じ位置に固定したいとき

使用する場合は上記のような時が多いですね。

要素を指定した分だけ動かす

他の配置プロパティ同様、positionプロパティを設定すれば指定した分だけ要素を動かすことができます。

要素の上に別の要素を重ねる

positionプロパティを使えば、要素同士を重ねることができます。その中で位置や重ね順も指定することができます。

要素を画面の常に同じ位置に固定する

また、画面をスクロールした際に同じ位置に止めることもできます。サイトの上部にあるメニューバーなどがその例です。

「配置」を決めるプロパティ

要素の位置はCSSの「position」プロパティで、指定します。
CSSの中では以下のように書きます。

.要素セレクタ{
　position : 値
}

CSSには、位置を決めるプロパティ「position」の他に、「float」や「display」といったプロパティがあります。
プロパティはデザインの目的に沿って使い分ける必要があるため、それぞれの特性を知ることが大切です。
今回はpositionプロパティの解説ですので、他のプロパティについては深く知る必要はありませんが、頭の隅で覚えておくと役にたつかと思います。
下の表を今後の参考にしてみてください。

セットで使う位置指定のプロパティ

positionを使うことでデザインの幅が広がります。

それでは具体的な内容に入っていきましょう！
まずはpositionプロパティと一緒に使う具体的に位置を指定するプロパティを説明しておきます。

top/bottom/left/rightで位置指定

まずはpositionプロパティで、要素が動く基準（起点）を決めます。
基本的にはtop/bottom/right/leftプロパティで具体的な位置を調整します。

topは基準の上部、bottomは下部、rightは右側、leftは左側からの距離を指定します。

z-indexで重ね順を指定

また、positionは要素同士を重ねることができる場合があります。
その際には、「z-index」を用いて要素同士の重なる順番を指定することができます。
「z-index : 数字（整数）」で指定した値が大きい要素ほど上に表示されます。

「position」で取れる値の種類

プロパティは取る値によって、要素の効果が変わってきます。

positionプロパティで取ることができる値は以下の５種類です。

デフォルトはstatic

「position」は、何もしなければデフォルトである「static」をとります。
基本的に「static」を指定することはありません。
そのため意識することのない値なのですが、以下のことを頭に入れておきましょう。

それは位置変更ができないということです。
そのため、positionプロパティが「static」の場合、top/bottom/right/leftなどの位置を変更するプロパティを使用しても効果は発揮されません。

また、要素の重なり順を指定することができません。
要素の重なり順を決めるプロパティである「z-index」を使っても、重なり順を変えられないのです。

位置や重なり順を変えたいときは、positionの値をrelativeやabsoluteにします。

現在の位置を起点に動くrelative

現在の位置（左上）を起点に要素の位置を動かすことができます。
この配置のことを相対配置と言います。
relativeの指定だけではなく、同時にtop/bottom/right/leftという値も指定することで要素の位置を変更することが可能です。

.要素セレクタ {
    position: relative;
    top: 50px;    left: 200px
}

親要素を起点に動くabsolute/fixed

最も近い「relative」(親や先祖の要素)を起点に要素の位置が動きます。
このように、現在の位置ではなく、特定の要素を起点に配置をすることを絶対配置と言います。
absoluteだけでは具体的な位置が指定できません。
そのため、relative同様にtop/bottom/right/leftプロパティを指定することが必要です。
relativeを指定していなければ起点はページ全体となります。

.親要素 {
    position: relative;
}
.子要素 {
  position: absolute;
  top: 150px;
  left: 100px;
}

fixed

この値は、常に画面に固定したいものがある場合に使います。
サイトの上部に出てくるメニューバーなどに使われています。
fixedは、absoluteと同様に絶対配置です。
しかし違う点としては、基準位置（起点）は常にブラウザウィンドウ領域であることです。
具体的な位置はtop/bottom/right/leftプロパティで指定します。

セレクタ{
    position: fixed;
}

上記の状態で画面をスクロールしても、固定されている要素の位置は変わりません。

相対位置×絶対位置　sticky

stickyは、スクロールに応じて要素を固定する時に使います。
粘着位置指定要素とも呼ばれ、性質はrelative、absolute、fixedに共通する部分があります。
指定した値を超えるまではrelativeのように配置され、越えるとfixedのようにスクリーン場で固定、最後にはabsoluteで他の要素と重なり固定するいった感じです。
もちろん位置や重なり順の指定も可能になります。

positionの注意点

特にコーディング初学者がつまずきやすい「position」。
しかし、前の章で紹介したようなcssで画面のレイアウト考える上で重要な値を指定できるセレクタです。
positionセレクタを使いこなせるだけで、サイトがグッと見やすく・使いやすくなります！

そこでpositionを使う際に個人的に気をつけている注意点が以下のポイントです。

どこが起点になるのか意識する

例えば、absoluteの起点は何も指定しなければページ全体になります。
特定の要素を起点にしたい場合、absoluteを指定する要素の親要素にrelativeをつけることで、親要素を起点に配置することができるようになります。

しっかりと今自分が何を指定して、何をしようとしているのか、理解していることが重要です！

まとめ

いかがでしたか？

positionには様々な配置の方法があり、コーディング初心者には少し複雑な部分だと思います。

今回は、positonについて学び直しました。
基本的なpositionの使い方を知っているだけでも、要素の配置が自由になり、様々な表現が可能になります。

HTMLやCSSを使っていくには、とても大切なタグなので基本を抑え、レイアウトの整った綺麗なサイトを作りたいですね！