| 属性名 | z-index |
|---|---|
| 値 | auto | <order> |
| 初期値 | auto |
| 適用可能要素 | ポジショニングされた要素 |
| 継承 | 継承しない |
| メディア | visual |
| アニメーション | 可能 (<order> の場合) |
| CSS | IE/Edge | Firefox | Chrome | Opera | Safari |
|---|---|---|---|---|---|
| CSS2 | 4.0 | 1.0 | 1.0 | 4.0 | 1.0 |
要素同士が重なって表示される場合の、重なりの順序を指定します。position に static 以外の値が設定されている要素に対して有効です。
| 値 | 説明 |
|---|---|
| auto | 重なり順序をブラウザが自動的に決定します。 |
| <order> | 表示順序を数値で指定します。-1 などマイナスの指定も可能です。数が大きなものほど前面に表示されます。 |
.sample {
position: absolute;
padding: 2px;
width: 80px;
height: 80px;
border: 1px solid #666666;
}
<div style="position:relative; height:160px"> <div class="sample" style="z-index:2; top:40px; left:20px; background:#ff9999">A</div> <div class="sample" style="z-index:3; top:60px; left:40px; background:#99ff99">B</div> <div class="sample" style="z-index:1; top:20px; left:60px; background:#9999ff">C</div> </div>