CSS辞典 z-indexプロパティの解説
ボックスの重ね順を指定する「z-indexプロパティ」の使用方法を記載
対応バージョン：CSS3／2.1
対応ブラウザ
| 初期値 | auto |
| 適用される要素 | positionプロパティによって配置された要素 |
| モジュール | CSS Level 2（Revision 1） |
| 継承 | なし |
概要・使用方法
{ z-index: 重ね順;}「 z-indexプロパティ」は、ボックスがpositionプロパティなどで重なった時の順序を指定します。値が大きいものほど前面に表示されます。
指定できる値（重ね順）
| auto | ボックスの重ね順はHTMLソースに記述した順に従います。 |
| 数値 | ボックスの重ね順を数値で指定します。数値が大きくなるほど上に重ねられます。32bitにおける符号付整数（-2147483648～2147483647）を指定できます。 |
サンプルコード
<!DOCTYPE html>
<html lang="ja">
<head>
<title>CSS z-indexプロパティサンプルページ</title>
<meta charset="uft-8">
<style>
.nav1{
position: absolute;
top: 3em;
left:3em;
width:30em;
height:30em;
z-index:5;
background-color:lightsteelblue;
}
.contents{
position: relative;
top: 1em;
width:20em;
height:40em;
z-index:2;
background-color:red;
}
.footer{
position: fixed;
top: 25em;
width:100%;
height:10em;
z-index:10;
background-color:aqua;
}
</style>
</head>
<body>
<div class="nav1">
z-index:3
</div>
<div class="contents">
z-index:2
</div>
<div class="footer">
z-index:10
</div>
</body>
</html>chromeブラウザ実行結果
Firefox ブラウザ実行結果
edgeブラウザ実行結果
operaブラウザ実行結果
