みなさんはpositionプロパティは使えていますか？
fixedはわかりやすいかと思いますが、他はなんとなく分かるようでいて、わかりにくいと感じている人も多いと思います。
この記事では、そんなpositionプロパティについて、実例を交えて詳しくご紹介したいと思います。
使えるようになると、コーディングの幅がグンと広がりますよ。
コンテンツ
static
positionプロパティの初期値はstaticとなります。
要素にpositionプロパティを指定していないときは、staticが指定されている場合の表示と同じ。平たく言うと、普通の状態です。
htmlの要素を書いていくと、上から順番に要素が表示されていきますが、
その状態がstaticなのです。
fixed
画面に対して、指定した位置に表示されます。
スクロールしても動かない、固定表示をしたい要素に用いるスタイルです。
画面に対しての位置のため、スクロールしても、固定された状態で常に同じ位置に表示。
top、left、right、bottomを併用して位置を指定して使います。
後述しますが、例えば、サイト右下にある「topへ戻るボタン」等に使われていますよ。
relative
主な使い方としては、この次に紹介するabsoluteの親として指定するときに使います。
（absoluteとセットで使うと覚えるとわかりやすいと思います）
また、相対位置（positionをstaticにしたとき）に対して、位置を指定して表示したいときにも使うことが可能。
その場合は、top、left、right、bottomを併用して位置を指定します。
absolute
親要素（relativeで指定をする）に対して、指定した位置に表示。
もし、親要素を指定しない場合は、ページに対しての絶対位置となります。
親要素に対しての位置のため、スクロールしたときは、親要素に合わせて動きますよ。
top、left、right、bottomを併用して位置を指定し、使うことがほとんどです。
よくあるpositionプロパティの使い方実例
static
初期値なので、敢えて指定することはあまりありません。
具体的な使い方としては、PCサイズのときにabsoluteで位置調整していたものを、スマホサイズでは順序良く上から並べたいなどのときに指定したりします。
fixed
topへ戻るボタン
押すとページの上部に戻るボタンを、常に画面右下あたりに置いてあるサイトはよく見かけます。
長いページなどでは、特に便利です。
固定ボタン
snsや、大事なお知らせなどのページへのリンクボタン、ショップサイトではカートやガイドが固定になっていることもあります。
いつでも画面上に表示されているので便利な反面、他の要素と重なる危険性もあるため、デザインや配置に配慮が必要です。特にスマホのサイズでは、画面のサイズが横幅めいっぱいのことも多いですから、より注意してください。
ヘッダーやグローバルナビゲーションの固定
ヘッダーやグローバルナビゲーションが上部に固定になっているサイトも多いです。
これもfixedで固定されています。
スマホサイズでのフッター固定ボタン
スマホで見た時に、お問い合わせや電話のボタンが下部に固定表示になっているサイトはよく見かけます。
迷うことなく1タップで電話がかけられるのは便利ですよね。
relative
absoluteの親として指定
absoluteは、複雑なデザインのサイトでは多用して表現されています。
その親として都度指定しますので、この使い方はとても多く見られます。
z-indexを指定するときに指定
z-indexはstaticには効きません。
前面に表示させたい要素が、何かの下に入り込んでしまっているときには、positionをrelativeにしてz-indexの順位を指定します。
relativeは、位置指定をしなければstaticと同じ位置表示です。
absolute
absoluteは、使い勝手が良く色々な場面で用いられているため、ここでご紹介するのはほんの一部です。
ボタンの後ろにカーソル
ボタンのデザインで、後ろに矢印マーク（＞）がついているものを多く見かけますよね。
これはボタンを親要素として、矢印マークがabsoluteで表現されている場合が多いです。
いちいち子要素をhtmlに記述するのは大変ですから、疑似要素（:beforeや:after）と組み合わせてデザインされていることがほとんどなのです。
グローバルナビゲーションのメニュー前後にカーソルやアイコン
ボタンと同様、グローバルナビゲーションやページメニューなどの前後に、ページが遷移することを表すため、矢印などのマークがついていることがあります。
お知らせなど、クリックすると詳細ページにジャンプする部分にも、ページ遷移のマークとして矢印は多く用いられていますよね。
こういった場合には、aタグの疑似要素に予めabsoluteで矢印を付けておくと、マークアップも効率的に行えるので、よく用いられる手法です。
リストの前にアイコン
リストは初めから（・）マークがセットされていますが、
大抵のサイトでは、何らかのデザインが施されています。
（◇）や、色のついた（●）、ちょっと凝った画像などが指定されている場合もよく見かけます。
このような場合は、一度list-styleを打ち消して、あらたに指定することが多いです。
リストもボタンと同じく、一つずつ子要素を入れる必要はないので、疑似要素と組み合わせて指定します。
特に画像がデザインされている場合には、文字サイズが適応されないため、細やかな位置調整で全体のバランスを整える必要があります。
背景などの上下左右にワンポイントで入っている柄を入れる
sectionやdivなどの大きな括りの一部に、繰り返しなしのイラストなどが入っているデザインでもabsoluteは活躍します。
:beforeと:afterの2つ指定できる点で、background-imageと異なります。スマホサイズの場合にどんな動きをしてほしいかなどによって、どちらを使うのか決めても良いでしょう。
まとめ
いかがでしたか？この記事では、わかるようでいて少し難しい、positionの使い方についてご紹介しました。
特にabsoluteは、いろいろな場面で用いられているので、日頃から気になるデザインのサイトなどの要素を覗いてみて、研究してみると新たな気付きも多いと思います。
理屈がわかれば、あとは経験値で「これはこんなふうに指定できるかな？」というのが、段々と分かるようになってきますので、積極的にpositionを使ってみてください。
positionがよくわからなかった、という人の参考に少しでもなりましたら嬉しいです。
