CSSのz-indexの使い方！要素を重ねる方法について解説
z-indexプロパティは、要素のスタック順序を指定します。
z-indexプロパティ
要素を配置すると、他の要素と重なることがあります。
z-indexプロパティは、要素のスタック順序(他の要素の前または後ろに配置する必要がある要素)を指定します。
要素は、正または負のスタック順序を持つことができます。
これは見出しです
画像の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 | 要素のスタック順序を設定します |
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。