CSS14のソース
ケース1
<html>
<head>
<style>
body{background-color:#555;}
div{
width:100px;
min-height:100px;
padding:10px;
border:1px solid #ff0;
}
#A{background-color:#f00;}
#B{background-color:#00f;}
#B-1{
background-color:#0af;
position:absolute;
top:150px;
left:150px;
z-index:10;
}
#B-2{
background-color:#a0f;
position:absolute;
top:200px;
left:200px;
z-index:5;
}
</style>
</head>
<body>
<div id="A"></div>
<div id="B">
<div id="B-1"></div>
<div id="B-2"></div>
</div>
</body>
</html>ケース2
<html>
<head>
<style>
body{background-color:#555;}
div{
width:100px;
min-height:100px;
padding:10px;
border:1px solid #ff0;
}
#A{
background-color:#f00;
position:absolute;
top:100px;
left:100px;
z-index:20;
}
#B{background-color:#00f;}
#B-1{
background-color:#0af;
position:absolute;
top:150px;
left:150px;
z-index:10;
}
#B-2{
background-color:#a0f;
position:absolute;
top:200px;
left:200px;
z-index:5;
}
</style>
</head>
<body>
<div id="A"></div>
<div id="B">
<div id="B-1"></div>
<div id="B-2"></div>
</div>
</body>
</html>ケース3
<html>
<head>
<style>
body{background-color:#555;}
div{
width:100px;
min-height:100px;
padding:10px;
border:1px solid #ff0;
}
#A{
background-color:#f00;
position:absolute;
top:100px;
left:100px;
z-index:-1;
}
#B{background-color:#00f;}
#B-1{
background-color:#0af;
position:absolute;
top:150px;
left:150px;
z-index:10;
}
#B-2{
background-color:#a0f;
position:absolute;
top:200px;
left:200px;
z-index:5;
}
</style>
</head>
<body>
<div id="A"></div>
<div id="B">
<div id="B-1"></div>
<div id="B-2"></div>
</div>
</body>
</html>ケース4
<html>
<head>
<style>
body{background-color:#555;}
div{
width:100px;
min-height:100px;
padding:10px;
border:1px solid #ff0;
}
#A{
background-color:#f00;
position:absolute;
top:100px;
left:100px;
z-index:20;
}
#B{
background-color:#00f;
position:absolute;
top:0;
left:0;
z-index:30;
}
#B-1{
background-color:#0af;
position:absolute;
top:150px;
left:150px;
z-index:10;
}
#B-2{
background-color:#a0f;
position:absolute;
top:200px;
left:200px;
z-index:5;
}
</style>
</head>
<body>
<div id="A"></div>
<div id="B">
<div id="B-1"></div>
<div id="B-2"></div>
</div>
</body>
</html>