z-index
CSS の z-index
プロパティは、位置指定要素とその子孫要素、またはフレックスアイテムの z 順を定義します。より大きな z-index を持つ要素はより小さな要素の上に重なります。
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
位置指定されたボックス (つまり、 position
が static
以外のもの) では、 z-index
プロパティが以下のことを定義します。
- 現在の重ね合わせコンテキストにおけるボックスの重ね合わせレベル
- ボックスがローカルな重ね合わせコンテキストを作るかどうか
構文
/* キーワード値 */
z-index: auto;
/* <integer> 値 */
z-index: 0;
z-index: 3;
z-index: 289;
z-index: -1; /* 負の数は優先度を下げる */
/* グローバル値 */
z-index: inherit;
z-index: initial;
z-index: unset;
値
形式文法
例
HTML
<div class="dashed-box">Dashed box
<span class="gold-box">Gold box</span>
<span class="green-box">Green box</span>
</div>
CSS
.dashed-box {
position: relative;
z-index: 1;
border: dashed;
height: 8em;
margin-bottom: 1em;
margin-top: 2em;
}
.gold-box {
position: absolute;
z-index: 3; /* put .gold-box above .green-box and .dashed-box */
background: gold;
width: 80%;
left: 60px;
top: 3em;
}
.green-box {
position: absolute;
z-index: 2; /* put .green-box above .dashed-box */
background: lightgreen;
width: 20%;
left: 65%;
top: -25px;
height: 7em;
opacity: 0.9;
}
結果
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
CSS Transitions animation behavior for z-index の定義 |
草案 | z-index をアニメーション可能として定義 |
CSS Level 2 (Revision 1) z-index の定義 |
勧告 | 初回定義 |
初期値 | auto |
---|---|
適用対象 | 位置指定要素 |
継承 | なし |
計算値 | 指定通り |
アニメーションの種類 | integer |
重ね合わせコンテキストの生成 | あり |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- CSS
position
プロパティ - CSS の z-index の理解