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

 

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

 

HTMLは縦に積まれていくため、要素を重ねるためにはCSSプロパティが必要です。要素を重ねて自由に表現するために使える「position（ポジション）」というプロパティの値や使い方について解説します。

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

CSSのpositionでできること

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

positionの書き方は？

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

<p class="codepen" data-height="102" data-theme-id="light" data-default-tab="css,result" data-user="kurokurochap" data-slug-hash="qBRwXbM" style="height: 102px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="qBRwXbM">

  <span>See the Pen <a href="https://codepen.io/kurokurochap/pen/qBRwXbM">

  qBRwXbM</a> by narumi (<a href="https://codepen.io/kurokurochap">@kurokurochap</a>)

  on <a href="https://codepen.io">CodePen</a>.</span>

</p>

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

○○の部分には、要素の名前かnameプロパティを入れます。例えば、「example-child」というnameプロパティを持つ要素を初期値から100px下に移動させたい時には次のようにCSSコーディングしましょう。

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="kurokurochap" data-slug-hash="ExZJveO" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="ExZJveO">

  <span>See the Pen <a href="https://codepen.io/kurokurochap/pen/ExZJveO">

  ExZJveO</a> by narumi (<a href="https://codepen.io/kurokurochap">@kurokurochap</a>)

  on <a href="https://codepen.io">CodePen</a>.</span>

</p>

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

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

①static…初期値。top、bottom、left、rightを使って要素をずらせる。

②relative…基準位置から相対的に要素の位置を動かせる。

③absolute…他の要素の位置に関係なく自由に重ねて配置できる。

④fixed…スクロールしても要素を特定位置に固定できる。

加えて、「sticky」という値も設定できます。この値で指定した要素はスクロール追従させることが可能です。「sticky」の使いどころは限られているので、HTML/CSS初心者が今すぐ覚える必要はありません。

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

では、要素を重ねてデザインの幅を広げるために「position」をどのように使えばよいのでしょうか。「position」で要素を重ねる方法について具体例を交えながら解説します。

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

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

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

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

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

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="kurokurochap" data-slug-hash="WNRWEEo" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="WNRWEEo">

  <span>See the Pen <a href="https://codepen.io/kurokurochap/pen/WNRWEEo">

  WNRWEEo</a> by narumi (<a href="https://codepen.io/kurokurochap">@kurokurochap</a>)

  on <a href="https://codepen.io">CodePen</a>.</span>

</p>

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

青色の部分は「absolute」で指定されているため、文字を無視して色がついています。このように要素を重ねてデザインする場面で使えるため、「position」の「relative/absolute」を使いこなせるようになれば配置の自由度が上がりますよ。

「relative」の使い方

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

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css" data-user="kurokurochap" data-slug-hash="yLgroKP" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="yLgroKP">

  <span>See the Pen <a href="https://codepen.io/kurokurochap/pen/yLgroKP">

  yLgroKP</a> by narumi (<a href="https://codepen.io/kurokurochap">@kurokurochap</a>)

  on <a href="https://codepen.io">CodePen</a>.</span>

</p>

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

「absolute」の使い方

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

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css" data-user="kurokurochap" data-slug-hash="eYgoEKr" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="eYgoEKr">

  <span>See the Pen <a href="https://codepen.io/kurokurochap/pen/eYgoEKr">

  eYgoEKr</a> by narumi (<a href="https://codepen.io/kurokurochap">@kurokurochap</a>)

  on <a href="https://codepen.io">CodePen</a>.</span>

</p>

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

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

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

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

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

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

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

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

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