z-index
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
z-index
は CSS のプロパティで、位置指定要素とその子孫要素、またはフレックスアイテムやグリッドアイテムの z 順を定義します。 z-index がより大きな要素はより小さな要素の上に重なります。
試してみましょう
位置指定されたボックス(つまり、position
が static
以外のもの)では、z-index
プロパティが以下のことを定義します。
- 現在の重ね合わせコンテキストにおけるボックスの重ね合わせレベル
- ボックスがローカルな重ね合わせコンテキストを作るかどうか
構文
css
/* キーワード値 */
z-index: auto;
/* <integer> 値 */
z-index: 0;
z-index: 3;
z-index: 289;
z-index: -1; /* 負の数はより低い優先度になる */
/* グローバル値 */
z-index: inherit;
z-index: initial;
z-index: revert;
z-index: revert-layer;
z-index: unset;
z-index
プロパティは、キーワード auto
または <integer>
のどちらかで指定します。
値
公式定義
初期値 | auto |
---|---|
適用対象 | 位置指定要素 |
継承 | なし |
計算値 | 指定通り |
アニメーションの種類 | integer |
重ね合わせコンテキストの生成 | あり |
形式定義
例
視覚的な階層を持つ要素
HTML
html
<div class="wrapper">
<div class="dashed-box">破線のボックス</div>
<div class="gold-box">金色のボックス</div>
<div class="green-box">緑色のボックス</div>
</div>
CSS
css
.wrapper {
position: relative;
}
.dashed-box {
position: relative;
z-index: 1;
border: dashed;
height: 8em;
margin-bottom: 1em;
margin-top: 2em;
}
.gold-box {
position: absolute;
z-index: 3; /* .gold-box を .green-box や .dashed-box の上に置く */
background: gold;
width: 80%;
left: 60px;
top: 3em;
}
.green-box {
position: absolute;
z-index: 2; /* .green-box を .dashed-box の上に置く */
background: lightgreen;
width: 20%;
left: 65%;
top: -25px;
height: 7em;
opacity: 0.9;
}
結果
仕様書
Specification |
---|
Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # z-index |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- CSS
position
プロパティ - CSS の z-index を理解する