こんにちは！
コーディングをするうえで何気によくお世話になるのが position 。
基本的には座標移動させるのに使用するpositionですが、疑似要素を用いた装飾をした場合の重なり調整役としても大変お世話になります。
positionとは
position の値は大きく分けて
- static（初期値）
- relative
- absolute
- fixed
- sticky
がありますが、今回は relative と absolute に焦点を当てて解説していきます◎
relative
「相対配置」として説明されることが多いrelative。
正直なんのこっちゃって感じなんですが、とりあえずイメージとしては「そこに鎮座しているおもちゃ箱」のような認識で良いと思います。
なりゆきのまま存在している配置、それが相対配置。
この後出てくる position: absolute を持つボックスの親にこの relative を指定しておくことで、absoluteの表示起点を relative の左上にすることができます。
absolute
「絶対配置」として説明されることが多いabsolute。
absolute だけを使うと、そのサイトの一番左上が起点になります。どこのボックスに absolute を書こうとも、左上に表示されます。
まわりの状況に左右されない配置、それが絶対配置。
それを制御するのが、先ほど出てきた relative。
親要素に relative が指定されている場合、absolute を持つ子要素は、 relative を持つ親要素の左上が起点になります。
また、absolute を指定したうえで、
- top,left,right,bottom
の値を指定することで、親要素 relative のボックスからどのくらいの位置に配置させるかを決められます。
<div class="oya">
<div class="ko">子だよ</div>
</div>.oya{
position: relative;
width: 200px;
height: 200px;
}
.ko{
position: absolute;
right: 0;
bottom: 0
}↑この場合は、親要素に対して右下に配置されるよ！ってことです。
ちなみに余談ですが、値ゼロと値unsetは違う挙動をするので注意。
relative と absolute の関係は、おもちゃ箱とその中のおもちゃ、のようなイメージになるでしょうか！
箱が無いとどっか行っちゃいますが、箱があればその中にちゃんとしまわれている、という感じです。
absolute を単品で使う恩恵はほぼないと思うので、基本的には relative と absolute はセットで使いましょう！
重なりも調整できる
webサイトで重なりって意識しづらいと思うんですが、positionで座標移動していると重なりの概念が見えてきます。
positionを指定してある要素に限り、重なりの指定ができるので、見てみましょう。
突然ですがこれは日の入りの水平線です（？）
relative を指定している親要素（sky）の子要素として、absolute を指定した海・星・太陽を置いています。これらはすべて兄弟要素となっているものとします。
しかしこの状態だと、太陽が水面に重なってしまっているので、うまく日の入りに見えないですね。
日の入りに見せるため、太陽を海の裏側に配置したいなーと思います。
太陽を海の裏側にする方法は、大きく2種類あります。
1.htmlの構成を変える
これが可能ならこれが良いと思います。
重なりの仕様として、「後から書かれているボックスのほうが上にくる」というものがあります。
なので、今回の場合は、海のボックスを一番後ろに持ってくればいいんです。
こんな感じ。
日の入りっぽい！
2.z-indexを指定する
文章構造上、どうしてもhtmlを変えられない…というときもあるとおもいます。
そんな時こそ position の重なりの神髄！ z-index を指定します。
今回は、海を前面に出せればよかったので、htmlは最初のままに、海に対して「z-index: 1;」を指定しました。
無事に海が前面にきて、太陽が隠れた風に見えますね！
z-indexの効き方としては、基本的に兄弟要素同士で比較が起きて、数値が高いほうが上に来るようになります。
未指定よりも1が強く、1よりも10のほうが強いです。数字の上限は無いです。
また、z-index 関係なく、 兄弟の中で position未使用とposition使用のボックスがあった場合、position使用のボックスのほうが重なりが上にきます。
さらに
relativeを指定している要素に対して、疑似要素に absoluteを使用した場合、疑似要素が一番上に来ます。z-indexを指定しても、relativeの要素より裏側に行きません。
ここは結構躓くことが多いかも。
どうしても領域いっぱいに疑似要素で装飾をしないといけない…、でもそうすると重なりの都合上、領域の中のリンクがクリックできなくなる…というような場合は、
疑似要素用のボックスをひとつ増やすか、
下記の記事なども参考にしてみてくださいね！
CSS：疑似要素が重なっていて子要素がクリック出来ないときの対処
まとめ
positionでの位置移動だけならまだしも、重なりっていうのはとても奥が深い…z軸なだけに…
でも、凝ったデザインを実装する場合には避けて通れない道だと思うので、ぜひ覚えておきましょう！
良いpositionライフを！
