このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
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 2015年7月.
z-index は CSS のプロパティで、位置指定要素とその子孫要素、またはフレックスアイテムやグリッドアイテムの z 順を定義します。 z-index がより大きな要素はより小さな要素の上に重なります。
試してみましょう
z-index: auto;z-index: 1;z-index: 3;z-index: 5;z-index: 7;<section> <div>Change my z-index</div> <div>z-index: 6</div> <div>z-index: 4</div> <div>z-index: 2</div> <div>z-index: auto</div> <div>z-index: auto</div> <div>z-index: auto</div></section>#example-element { top: 15px; left: 15px; width: 180px; height: 230px; position: absolute; /* center the text so it is visible even when z-index is set to auto */ line-height: 215px; font-family: monospace; background-color: #fcfbe5; border: solid 5px #e3e0a1; z-index: auto; color: black;}.container { display: inline-block; width: 250px; position: relative;}.block { width: 150px; height: 50px; position: absolute; font-family: monospace; color: black;}.blue { background-color: #e5e8fc; border: solid 5px #112382; /* move text to the bottom of the box */ line-height: 55px;}.red { background-color: #fce5e7; border: solid 5px #e3a1a7;}.position1 { top: 0; left: 0; z-index: 6;}.position2 { top: 30px; left: 30px; z-index: 4;}.position3 { top: 60px; left: 60px; z-index: 2;}.position4 { top: 150px; left: 0; z-index: auto;}.position5 { top: 180px; left: 30px; z-index: auto;}.position6 { top: 210px; left: 60px; z-index: auto;}位置指定されたボックス（つまり、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 |
| 重ね合わせコンテキストの生成 | あり |
形式定義
z-index =
auto|
<integer>|
inherit
<integer> =
<number-token>
例
視覚的な階層を持つ要素
HTML
html
<div> <div>破線のボックス</div> <div>金色のボックス</div> <div>緑色のボックス</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 # z-index |
ブラウザーの互換性
関連情報
- CSS
positionプロパティ - CSS の z-index を理解する