重なる順序を指定する

z-index: 重なる順序

z-index プロパティは、絶対配置や相対配置されている要素の重なる順序を指定します。
通常表示される状態を0として、
値が大きいものほど上に（重ねられた状態で）表示されます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META http-equiv="Content-Style-Type" content="text/css">
<TITLE>CSS覚書</TITLE>
<STYLE type="text/css">
<!--
body {
color: #ff6600;
background: #ffffff
}
#sample1 {
position: absolute;
z-index: 2;
top: 210px;
left: 100px;
width: 130px;
height: 90px;
color: #ffffff;
background-color: #339933
}
#sample2 {
position: absolute;
z-index: 1;
top: 110px;
left: 200px;
width: 95px;
height: 280px;
color: #ffffff;
background-color: #ff3300
}
#sample3 {
position: absolute;
z-index: 3;
top: 280px;
left: 150px;
width: 180px;
height: 50px;
color: #ffffff;
background-color: #333399
}
#sample4 {
position: absolute;
top: 140px;
left: 50px;
width: 380px;
height: 220px;
color: #000000;
background-color: #ffcc00
}
p { padding: 0.5em }

h1 {
text-align: center;
color: #ff6600
}
-->
</STYLE>
</herd></HEAD>
<body>
<h1>重なる順序を指定する</h1>

<P id="sample1">
z-index: 2<br>ソース順：１
</p>
<P id="sample2">
z-index: 1<br>ソース順：２
</p>
<P id="sample3">
z-index: 3<br>ソース順：３
</p>
<P id="sample4">
z-index指定なし(0)<br>ソース順：４
</p>

</body>
</html>