<!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>重ね合わせの順序を指定したい</title>

<style type="text/css">
<!--
BODY{MARGIN:0;scrollbar-base-color:#ffffff;scrollbar-shadow-color:#e0ffff;scrollbar-darkshadow-color:#fffacd;scrollbar-face-color:#dcdcdc;scrollbar-highlight-color:#fffafa;}

a:visited{color:#fffafa}
a:hover{color:#e0ffff}
a:active{color:#e0ffff}
div	{
	position: absolute;
	width: 200px;
	height: 100px;
	text-align: center; 
	font-size: xx-large;
        filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100,finishopacity=0,style=1,startx=0,starty=0,finishx=100,finishy=100)

}
div.sample1	{
	z-index:0;
	top: 135px;
	right: 65px;
	background-color: #e0ffff
}
div.sample2	{
	z-index:1;
	top: 80px;
 	right:55px;
	background-color: #f0fff0
}
div.sample3	{
	z-index:2;
	top: 25px;
	right: 45px;
	background-color: #fffacd
}
div.sample4	{
	z-index:3;
	top:30px;
	right:35px;
	background-color: #faebd7
}
div.sample5	{
	z-index:0;
	top: 180px;
	right: 440px;
	background-color: black
}
div.sample6	{
	z-index:1;
	top: 175px;
 	right:470px;
	background-color: #696969
}
div.sample7	{
	z-index:2;
	top: 230px;
	right: 495px;
	background-color: #a9a9a9
}
div.sample8	{
	z-index:3;
	top:285px;
	right:505px;
	background-color: #dcdcdc
}


-->
</style>

</head>

<body>
<div class="sample1"></div>
<div class="sample2"></div>
<div class="sample3"></div>
<div class="sample4"></div>
<div class="sample5"></div>
<div class="sample6"></div>
<div class="sample7"></div>
<div class="sample8"></div>
</body>

</html>