CSSのz-indexとpositionで要素を好きな位置に、重ねて表示する方法

今回のお題

クライアント

自社プロダクトで使っている画像の上に、カテゴリーを表示したいです。edbase.jpは「LMS」、qbase.bizは「APP」にして、色を分けて下さい。

今後プロタクトは増えていく予定なので、メンテしやすい形で作って欲しいです。

• CSSで使うpositionについて知ろう
• CSSのpositionプロパティとは
• position:relativeとは
• position:absoluteとは
• z-indexプロパティで重ね順変更も可能
• CSSのz-indexとは？
• z-indexプロパティの使用条件
• 実習

CSSで使うpositionについて知ろう

今回のお題は、下図のように「画像の上に要素を表示したい」というものです。

ブログやメディアサイトでも、画像の上にカテゴリーや更新日などが表示されているデザインはよく見かけますね。
例えば、zozotownのクーポンや値引き表示も、同じ作りです。

https://zozo.jp/

このような画像の上に文字やアイコンを表示するレイアウトを作るとき、よく使われているのがCSSのpositionプロパティです。

CSSのpositionプロパティを使うと、特定の要素を好きな位置に表示させたり、重ねて表示することができるようになります。

背景画像指定との違い

今回のようなレイアウトを作りたい場合、要素にwidthやheightを指定して、background-imageで背景画像として読み込む方法もあります。
が、背景画像で設定する場合は、新しい情報が登場するたびにCSSで背景画像を設定しなくていはいけません。

今回のように今後増えていく予定がある場合や、WordPressなどでアイキャッチ画像を自動的に出力する場合は大変です。今回使うpositionを使ってCSSを書いておけば、画像はシンプルにimgで呼び出せるので更新が楽ですよ。

CSSのpositionプロパティとは

CSSのpositionプロパティは、要素をどのように配置するかを決めるプロパティです。

今回はpositionプロパティの中でも使用頻度が高い、position: relativeとposition: absoluteの２つを中心に学習しましょう。

positionプロパティの値について

positionプロパティで使われる値は、主に以下の５つです。
まずは、初期値（未指定の場合）はstaticになるということだけ覚えましょう。

要素の位置を決めるtop, bottom, left, right

positionプロパティとセットで使われることが多いのが、要素の位置を決める以下4つのCSSプロパティです。

• top：上からどのくらいの位置に配置するか
• bottom：下からどのくらいの位置に配置するか
• left：左からどのくらいの位置に配置するか
• right：右からどのくらいの位置に配置するか

※porisionの値が未指定/staticの場合は、指定できません。

position:relativeとは

position:relativeは相対配置や相対位置指定などと呼ばれます。
何が相対かというと、本来その要素が配置されるはずの場所を起点に、位置指定をすることができるためです。

テストファイル（position-test.html）を使って、実験してみましょう。

テストファイルではどの要素にもpositionの指定はしていません。
全て初期値＝staticの状態です。

検証ツールでdiv.f-item2を選択して下さい。
Stylesパネルを使って、position:relative;を指定してみます。

position:relative;を指定しただけの状態では、表示は変わりません。

どこに配置したいのか、更に書き足してみましょう。
上から20px、左から50pxの位置に配置してみます。
Stylesパネルにtop:20pxとleft:50pxと打ち込みます。

本来配置される場所から、指定した距離分、要素が移動しました。

これが、相対位置（通常の表示位置から、相対的に位置を指定する）です。

また、隣の.f-item3と重なって表示されているという点も、positionプロパティで位置指定をする特徴です。浮き上がったような扱いになっているので、隣の.f-item3の大きさや位置には影響を与えません。

position:absoluteとは

次に、絶対位置指定と呼ばれるposition:absoluteを見てみましょう。
同じくposition-test.htmlと検証ツールを使います。

div.f-item3を選択して、Stylesパネルでposition:absoluteを指定してみます。

位置が変わりましたね。
f-item1と重なって表示されています。

どこを基準にして位置指定ができるか調べてみましょう。
Stylesパネルでtop:0と打ち込みます。

更にleft:0;も追加すると、div.f-item3はブラウザwウィンドウの左上にピッタリとくっつきました。

これが、説明「直近の祖先要素でstatic以外のpotisionが指定されている要素、もしくはウィンドウの左上を基点に絶対位置への配置を指定する」のウィンドウの左上を基点に、という部分です。

◆絶対配置の基点を作る

では、次に「直近の祖先要素でstatic以外のpotisionが指定されている要素」がある場合の配置を見てみましょう。

div.f-item3にposition:absolute;とtop:0;、left:0;の指定が残った状態で、親要素のdiv.f-containerを選択してください。
Stylesパネルで.f-containerにposition: relativeを追加します。

絶対配置の基点が変わりました。
left:0;をright:0;に打ち替えると、右に動きます。

◆基点はposition:relativeでなくてもOK

position:absoluteを使って絶対位置指定をする場合は、基点にする要素にposition:relativeを指定することが大半です。

しかし「祖先要素でstatic以外のpotisionが指定されている要素」であれば、position:absolute;要素の基点になることができます。

例えば、div.f-item3がposition:absoluteの時に、その子要素のdiv.f-item3-childにもposition:absoluteを指定すると以下のようになります。
div.f-item3を基点にしていることがわかりますね。

position:absoluteで位置を決めたい時に、基点となる要素にposition:relativeを指定することが多い理由は、position:relativeのみ指定した状態では、未指定時と全く表示位置が変わらないためです。

z-indexプロパティで重ね順変更も可能

CSSのz-indexとは？

CSSでは、z-indexというプロパティを使って、要素の重ね順を変更することが出来ます。

z-indexの値は初期値がauto。
任意で重なり順を変えたい場合は、整数値を使って指定します。

.f-item1{
    position: absolute;
    top: 0;
    z-index: 1;
    background: hsl(290, 55%, 80%);
}

z-indexの値が大きいほど、要素は前面に表示されます。
マイナスを付けて負の整数にすると、本来の重ね順よりも背面に表示されます。

z-indexプロパティの使用条件

z-indexは全ての要素に使えるわけではありません。
以下のように決められています。

z-index は CSS のプロパティで、位置指定要素とその子孫要素、またはフレックスアイテムの z 順を定義します。より大きな z-index を持つ要素はより小さな要素の上に重なります。
引用元：https://developer.mozilla.org/ja/docs/Web/CSS/z-index

実習

では、今回のお題の「画像の上にカテゴリー名を表示」を、positionプロパティを使って作っていきましょう。
下図が、構成のイメージです。

画像の上に表示したいテキストを入力します。
position:absolute;を指定できるように、divタグで囲ってクラスを追加しましょう。

index.html

<div class="image">
    <img src="images/product01.jpg">
    <div class="label">LMS</div><!-- ここを追加 -->
</div>

プロダクトのセクションで、画像を囲っているdiv.imageを基点に、追加したlabelクラスを絶対位置で配置します。

style.css

.image{
  position: relative;
}

.image .label{
  position: absolute;
  top: 10px;
  left: 10px;
}

ブラウザで確認します。
指定した位置に、テキストが表示されていれば成功です。

◆labelクラス部分の装飾

edbase.jpは「LMS」、qbase.bizは「APP」にして、色を分けて下さい。

文字色で指定してしまうと、写真と重なって見にくいところが出てきそうです。
色分けは背景色を使って行いましょう。
色は特に指定されていませんので、お好きに指定してみてください。

style.css

.image .label{
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 5px 10px;
  color: #FFFFFF;
  background: rgb(76, 175, 80, 70%);
}

次に、qbase.bizに別の背景色で「APP」を追加するわけですが…。
<div class="labelapp">などと命名して、上のCSSを全てコピペするのは面倒です。
topやleftからの位置を調整したい、となったら何箇所も直さなくてはいけません。

このようなときは、下図のようにクラスを分けると便利です。

2つめのhttps://qbase.bizの部分も作ると、以下のようになります。

index.html

<section>
  <h2>自社プロダクト</h2>
  <p>開発・運営しているプロダクトです</p>
  <div class="row">
    <div class="image">
      <img src="images/product01.jpg">
      <div class="label lms">LMS</div>
    </div>
    <div class="description">
      <h3>
        ビジネスができるオンラインスクールのプラットフォーム
      </h3>
      <p>ただのe-Learningサービスではありません。誰もがオンラインスクールをかんたんに運営することができます。講座を販売したり、サブスクリプションサービスを提供することができる今までにない教育プラットフォームです。</p>
      <a href="https://edbase.jp" target="_blank">https://edbase.jp</a>
    </div>
  </div>

  <div class="row">
    <div class="image">
      <img src="images/product02.jpg">
      <div class="label app">APP</div>
    </div>
    <div class="description">
      <h3>
        革新的テストの作成・結果の分析サービス
      </h3>
      <p>従来のテスト作成方法は面倒で修正が大変でした。Qeditorは革新的なテスト作成エディターを使って素早くテスト作成ができます。それだけではなく詳細な分析が可能。素早くクオリティの高いテスト作成のためのツールです。</p>
      <a href="https://qbase.biz" target="_blank">https://qbase.biz</a>
    </div>
  </div>
</section>

style.css

.image{
  position: relative;
}

.image .label{
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 5px 10px;
  color: #FFFFFF;
}

.image .label.lms{
  background: rgb(76, 175, 80, 70%);
}

.image .label.app{
  background: rgb(255 152 0 / 70%);
}

これで完成です。