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

HTML/CSS

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

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

HTML

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

CSS

.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を使用します。詳しくは下記

z-indexの基本的な使い方

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

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

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

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

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

static基準値。(z-indexでは使わない。基準値確認用)
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://ka-holidayrefresh.com/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の応用をご紹介します。

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

2020年5月10日HTML/CSSCSS,WEB

Posted by KT