【CSS】postisionで要素を重ねる方法

こんにちは、佐藤優里(@engneerlabo)です。
フリーランスWebデザイナーとして主にホームページ制作・管理をしています。
このブログでは、postisionで要素を重ねる方法について解説していきます。

ぺんぺん

positionっていうプロパティはどうやって使うの？できれば難しい記述なく書ける方法を教えてください。

以上のような、positionの作り方に関するお悩みにお答えします。

要素を重ねるためにはCSSプロパティ「position」が必須です。もし読み進めてみても分からないことがあれば今月は夜20時に無料の自習室を開催していますのでそこでご質問下されば！

佐藤先生

HTMLやCSSのコーディングをはじめたてでも、すぐに実践できる「position」の具体的な活用例を紹介しているので参考になさってください。

CSSのpositionでできること

「position」は、要素の配置方法を自由に指定できるCSSプロパティです。例えば、指定要素を移動させたい、要素を重ねたい、要素を固定表示させたいという場面で利用できます。要素を配置する高さや横位置を設定するためには「top/bottom/left/right」というプロパティを併用しなければなりません。

positionの書き方は？

「position」を利用するときの具体的な書き方は次の通りです。

<div class="box-section">
　　<div class="box1"> </div>
</div>

例えば、「box1」というセレクタを持つ要素を初期値（box-section）から30px下に移動させたい時には次のようにCSSを書きましょう。

<style>
.box-section{
position:relative;
}

.box1{
position:absolute;
top: 30px;
left: 0
}
</style>

「position」の配置方法として設定できる値は次の4つです。

加えて、「sticky」という値も設定できます。この値で指定した要素はスクロール追従させることが可能です。「sticky」の使いどころは限られているので、HTML/CSS初心者が今すぐ覚える必要はありませんが、バナー等をスクロール追従させたい方はこちらの記事に手順方法を解説しているのでご確認ください。

positionで要素を重ねる方法：relative/absolute

考え方は簡単です。
重ねたい要素には、absoluteを指定して、初期値にしたい要素にはpositionを指定します。

親子関係を構築して要素を重ねる

まず、要素を親要素と子要素に分けてCSS指定します。要素の親子関係を構築することによって重ねられるようになるのです。

要素を重ねたい時に使う「position」の値は「relative/absolute」です。「relative」は初期位置を起点に要素の位置を変更できます。また、「top/bottom/right/left」を使って要素の位置を細かく指定することも可能です。

「relative」とセットで使いやすいのが「absolute」です。最も近くにある「relative」を起点にして、要素の位置を動かすことができます。

「absolute」は数学で出てくる「絶対値」に似ていて、他の要素に関係なく配置が可能です。その点を次の具体例から確認しましょう。

「relative」の使い方

要素同士を重ねてタイトル付きブロックを作成したい時にも「relative」を使えます。次のようにコーディングするとブラウザ上はどのように表示されるでしょうか。

「absolute」の使い方

構築された親子関係の中で子要素である「absolue」は必ず「relative」とセットで使うようにしましょう。実際に使用した場合のコーディング例とブラウザ画面を紹介します。

要素を重ねるときの注意点

「relative」が指定されていない場合、ページ全体が起点となりますので注意してください。起点が親要素に合っていなければ、表示する端末によって行数が変わったときにずれが生じてしまいます。

起点を要素を重ねたい時には、何を指定してどこに配置しようとしているのかを明確化しておきましょう。「absolute」を指定する際には「relative」を親要素としてつけることを忘れないでください。

z-indexで要素の重なりの順序を変える

「position」出配置した要素の重なり順を変えるために「z-index」というプロパティが使えます。「z-index」の値が大きくなるほど上側に重ねられます。いくつも子要素（absolute）を重ねるときに「z-index」を使うと、重なりの順序を入れ替えられるのです。

z-indexは、自然数しか使えません。１が一番前にきますので、重なり順は自然数が小さいものからになります。

【CSS】positionで要素を重ねて自由に表現しよう

少し複雑に感じてしまうCSS positionですが、HTML/CSSコーディング初心者であっても使いこなさるプロパティです。特に「absolute」は様々なサイトデザインで使われている値ですので、使用頻度は高いでしょう。

慣れるまで、思い通りに要素の位置取りをするのは難しいですが、経験値が上がれば自由自在にデザインできるようになります。早い段階で「position」を使って要素を重ねたりしながら、コーディングによる表現方法を学んでいきましょう。

豊富な拡張機能を使いながらコーディングスキルをつけられるVScodeの使い方についてまとめているので、こちらもチェックしてみてください。

佐藤先生