【CSSで要素を重ねて表示】z-indexの使い方と調整方法

今回はCSSのプロパティの「z-index」を使用して要素と要素を重ねる方法とその調整方法を紹介します。
「z-index」を使用すると下記の様に2枚の画像を重ねたり、画像にテキストを乗せたり、div要素同士を自由自在に重ねたりする事が出来ます。

下記のアコーディオンに上記の重ね合わせのHTMLとCSSを載せています。

<img src="https://kt-life.net/wp-content/uploads/2020/05/mannsyonnn-768x334.jpeg" alt="" class="image-sm1"/>
<img src="https://kt-life.net/wp-content/uploads/2020/04/サメ1.png" alt="" class="image-sm2"/>

.image-sm1 {
position:relative;;top: 100px; z-index: 1;
}
.image-sm2 {
position:relative;; top: -210px; left: 100px; z-index: 2;
width: 80%;
}
@media (max-width: 575px) {
 .image-sm1 {
position:relative;;top: 100px; z-index: 1;
}
.image-sm2 {
position:relative;; top: -40px; left: 80px; z-index: 2;
width: 60%;
}}

重ねた要素で切り抜きたい場合はmaskを使用します。詳しくは下記。

【CSS】2枚の画像を重ねてマスク（切り抜き）をする方法

今回は、CSSを使用してWEB上にアップロードした２つの画像を重ねて一方の画像の形に切り抜き（マスク）をする方法を紹介します。マスクとは、画像や要素の不要な部分を隠して見せたい部分のみを表示する技術です。PhotoshopやIllustratorなどの編集ソフトでよく行われる技術です。WEB上では編集ソフトを使わずにCSSのプロパティのみで可能です。「マスク」「マスキング」「mask」「クリッピングマスク」などと言います。

kt-life.net

2020.05.11

z-indexの基本的な使い方

z-indexは基本的に下記の様に記述します。

.class {
position: relative; z-index: 値;
}

「z-index」は重ね順の順番を指定するプロパティです。また、z-indexを指定する際は位置を指定する「position」プロパティが必ず必要になります。

重ね順の数値は「0」が最も後ろで、数値が上がるほど上のレイヤーに重なります。

「position」プロパティは「static」「relative」「absolute」「fixed」の指定があります。

※相対位置の基準値はpositionプロパティでstaticを指定した場合に表示される位置です。
※絶対位置は、親ボックスにpositionプロパティのstatic以外の値が指定されている場合には、親ボックスの左上が基準位置となります。それ以外はウィンドウ全体の左上が基準位置となります。

では実際に要素を重ねてみましょう。

要素と要素の重ね合わせ

下記は2つのdiv要素に背景色を入れて「z-index」で重ねています。

HTMLとCSSの記述は以下のよう。

HTML

<div class="test1">
</div>
<div class="test2">
</div>

CSS

.test1 {
    height: 200px;             /* 高さの指定 */
    width: 200px;              /* 幅の指定 */
    background-color: blue;     /* 背景色の指定 */
    position: relative;        /* 位置の指定 */
    z-index: 1;                /* 重ね順の指定 */
}
.test2 {
    height: 200px;             /* 高さの指定 */
    width: 200px;              /* 幅の指定 */
    background-color: red;    /* 背景色の指定 */
    position: relative;       /* 位置の指定 */
    top: -100px;              /* 位置の指定 */
    left: 100px;              /* 位置の指定 */
    z-index: 2;               /* 重ね順の指定 */
}

この様に「z-index: 1;」の青が下で「z-index: 2;」の赤が上に重なります。

画像とテキストを重ねる場合

次は下記の様に画像にテキストを重ねる記述を紹介します。

この様に文字と画像を重ねる事が出来ます。

HTML

<p class="sample">この様に文字と画像を重ねる事が出来ます。</p>
<img src="https://kt-life.net/wp-content/uploads/2020/05/yamayam-768x284.jpeg" alt="" class="sample"/>

CSS

p.sample {
color: #000000; background-color: #ddd;  /*テキストの背景*/
position: relative; top: 150px; z-index: 2; /*テキストボックスの位置 重ね順*/
text-align: center; /*テキストの位置*/
}
img.sample {
position: relative; z-index: 1;　/*重ね順*/
}
/*スマホ時の調整*/
@media (max-width: 575px) {
 p.sample {
 position: relative; top: 100px; z-index: 2;
}}

z-indexの使い方は画像同士の時と同じだが、スマホ端末時に注意。上記の記述では画面幅が575px以下の端末では別の位置調整を読み込んでいます。

relative:fixed z-index の使い方

次にグロナビやポップアップなどでよく使用される「relative:fixed」の場合の基本的な記述を紹介します。

HTML

<div class="example">
<p>これはテキストです。スクロールします。</p>
<p>これはテキストです。スクロールします。</p>
<p>これはテキストです。スクロールします。</p>
<p>これはテキストです。スクロールします。</p>
<p>これはテキストです。スクロールします。</p>
<p>これはテキストです。スクロールします。</p>
<p>これはテキストです。スクロールします。</p>
<p>これはテキストです。スクロールします。</p>
<p>これはテキストです。スクロールします。</p>
<p>これはテキストです。スクロールします。</p>
<p>これはテキストです。スクロールします。</p>
<p>これはテキストです。スクロールします。</p>
<p id="fixed">fixedはスクロールしても固定されます。</p>
</div>

CSS

#fixed {
  position: fixed;z-index: 2;
  top: 0; /*基準を画面の左上に*/
  left: 0; /*基準を画面の左上に*/
  margin: 0; /*余白が入らないように*/
  width: 100%;
  background: #FFC778;
  color:white;
}

上記の記述で、スクロールしても常に上側に要素を固定することができました。このように何かを固定するときにfixedは使えます。

WEBではトップに固定されているグローバルナビゲーションに良く使用されています。

以上が「【CSSで要素を重ねて表示】z-indexの使い方と調整方法」でした。

今回は基本的な使い方のみを紹介しましたが、後日に具体的なグローバルナビゲーションやポップアップの作り方などのz-indexの応用をご紹介します。

それらの技術を理解するには、まずは今回の様な基本部分をしっかりと覚えておきましょう。