| プロパティ名 | 値 | 適用対象 | 継承 |
|---|---|---|---|
| z-index: | 重なる順序 | position:static以外の要素 | なし |
| 値 | 説明 | |
|---|---|---|
| 重なる順番 | 整数 | 表示順を整数で指定します。 ０を基準に値の大きいほうが前面に表示されます。 |
| auto | HTMLで記述された順に表示されます。 最後に記述された要素が最も前面に表示されます （デフォルト）。 |
z-indexプロパティは、複数の要素が重なったときの、重なりの順番を指定します。重なる順番には、整数またはautoを指定します。通常はHTMLで記述した順番に表示されます。重なりの順番を変更することで、指定した順番で要素を重ねて表示できます。
■z-indexプロパティは、positionプロパティでrelative、absolute,relative、fixedが指定されている時に有効です。
サンプルソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<style type="text/css">
<!--
body{margin:0}
div{position:absolute;}
.box{width:500px;
height:80px;
background-color:yellow;
font-size:30px;
text-align:center;
z-index:1;
}
.pos01{top:70px;
left:50px;
z-index:2;
}
.pos02{top:50px;
left:150px;
z-index:3;
}
-->
</style>
</head>
<body>
<div class="box">厳島神社</div>
<div class="pos01"><img src="画像ファイル" width="400" height="350"></div>
<div class="pos02"><img src="画像ファイル" width="400" height="350"></div>
</body>
</html>
