Dreamweaver TechniqueJAVA Script サンプル | CSS sample | JAVA Applet sample | Flash Sample
HTML4.0 reference | DynamicHTMLXHTML | XML sample | XSLT sample | RIKO's ASP Trial
ASP ADO リファレンス | PHP関数リファレンス | MySQL関数リファレンス

要素の重ね合わせの順序

■ 要素の重ね合わせの順序

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

■ 作例

HTMLソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>重なる順序を指定する</title>
<style type="text/css">
<!--
#sample1 {
position: absolute;
z-index: 2;
top: 230px;
left: 100px;
width: 130px;
height: 90px;
color: #ffffff;
background-color: #339933
}
#sample2 {
position: absolute;
z-index: 1;
top: 130px;
left: 200px;
width: 80px;
height: 280px;
color: #ffffff;
background-color: #ff3300
}
#sample3 {
position: absolute;
z-index: 3;
top: 300px;
left: 150px;
width: 180px;
height: 50px;
color: #ffffff;
background-color: #333399
}
#sample4 {
position: absolute;
top: 160px;
left: 50px;
width: 380px;
height: 220px;
color: #000000;
background-color: #ffcc00
}
p { padding: 0.5em }
-->
</style>
</head>
<body>
<p id="sample1" name="sample1"> z-index:2<br>
ソース順:1
</p>
<p id="sample2" name="sample2"> z-index:1<br>
ソース順:2
</p>
<p id="sample3" name="sample3"> z-index:3<br>
ソース順:3
</p>
<p id="sample4" name="sample4"> z-index指定なし(0)<br>
ソース順:4
</p>
</body>
</html>

<<<戻る

R HOUSE | RIKO's Trial Page | Shirley's Pettit Case | Shirley's i-box | Shirley's little box | CSS Trial