TECH I.S.

CSSのz-indexの使い方!要素を重ねる方法について解説


z-indexプロパティは、要素のスタック順序を指定します。

z-indexプロパティ

要素を配置すると、他の要素と重なることがあります。

z-indexプロパティは、要素のスタック順序(他の要素の前または後ろに配置する必要がある要素)を指定します。

要素は、正または負のスタック順序を持つことができます。

これは見出しです

画像のz-indexは-1であるため、テキストの後ろに配置されます。

img{  position: absolute;    left: 0px;  top: 0px;  z-index: -1; }

自分で試してみる »

ノート:z-indexは配置された要素(position: absolute、position: relative、position: fixed、またはposition: sticky)およびフレックスアイテム(display: flex;を指定した要素の直接の子要素)で機能します。


別のz-indexの例

ここで、スタック順序が大きい要素は常にスタック順序が小さい要素の上にあることがわかります。

<html> <head> <style> .container {   position: relative; } .black-box {   position: relative;   z-index: 1;   border: 2px solid black;   height: 100px;   margin: 30px; } .gray-box {   position: absolute;   z-index: 3;   background: lightgray;   height: 60px;   width: 70%;   left: 50px;   top: 50px; } .green-box {   position: absolute;   z-index: 2;   background: lightgreen;   width: 35%;   left: 270px;   top: -15px;   height: 100px; } </style> </head> <body> <div class="container">   <div class="black-box">黒色のボックス</div>   <div class="gray-box">灰色のボックス</div>   <div class="green-box">緑色のボックス</div> </div> </body> </html>

自分で試してみる »


z-indexなし

z-indexを指定せずに配置された2つの要素が重なっている場合、HTMLコードの最後に定義された要素が一番上に表示されます。

上記と同じ例ですが、ここではz-indexが指定されていません。

<html> <head> <style> .container {   position: relative; } .black-box {   position: relative;   border: 2px solid black;   height: 100px;   margin: 30px; } .gray-box {   position: absolute;   background: lightgray;   height: 60px;   width: 70%;   left: 50px;   top: 50px; } .green-box {   position: absolute;   background: lightgreen;   width: 35%;   left: 270px;   top: -15px;   height: 100px; } </style> </head> <body> <div class="container">   <div class="black-box">黒色のボックス</div>   <div class="gray-box">灰色のボックス</div>   <div class="green-box">緑色のボックス</div> </div> </body> </html>

自分で試してみる »


CSSプロパティ

プロパティ

説明

z-index 要素のスタック順序を設定します


プログラミング学習を加速させる

プログラミングをプロの講師に教えてもらいませんか。

テックアイエスのプログラミングスクールは初心者も大歓迎です。年齢制限もありません。転職・副業に強く、挫折させない手厚いサポートで稼ぐ力を身につけましょう!

スクールの詳細