CSSレイアウト-z-indexプロパティ
プロパティは、要素のz-indexスタック順序を指定します。
z-indexプロパティ
要素を配置すると、他の要素と重なる可能性があります。
このz-indexプロパティは、要素のスタック順序を指定します（どの要素を他の要素の前または後ろに配置する必要があります）。
要素は、正または負のスタック順序を持つことができます。
これは見出しです
画像のz-indexは-1であるため、テキストの後ろに配置されます。
例
img
{
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
注： z-index配置された要素（位置：絶対、位置：相対、位置：固定、または位置：スティッキー）およびフレックスアイテム
（表示の直接の子である要素：フレックス要素）でのみ機能します。
別の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">Black box</div>
<div class="gray-box">Gray
box</div>
<div class="green-box">Green box</div>
</div>
</body>
</html>
z-indexなし
配置された2つの要素が指定なしで互いに重なっている場合、HTMLコードで最後にz-index
定義された要素が一番上に表示されます。
例
上記と同じ例ですが、ここでは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">Black box</div>
<div class="gray-box">Gray
box</div>
<div class="green-box">Green box</div>
</div>
</body>
</html>
CSSプロパティ
| Property | Description |
|---|---|
| z-index | Sets the stack order of an element |