z-indexにまつわる簡単な問題
次の場合、ブラウザでの表示はどうなるでしょうか。
答えは実際に実行してみてください。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>z-index test</title>
<style type="text/css">
#layer01 {
width: 300px;
height: 120px;
background: lightblue;
position: absolute;
z-index: 3;
}
#layer02 {
width: 600px;
height: 180px;
background: pink;
position: absolute;
z-index: 2;
}
#layer03 {
width: 1200px;
height: 240px;
background: dimgray;
position: absolute;
z-index: 1;
}
</style>
</head>
<body>
<div id="layer02"></div>
<div id="layer03"><div id="layer01"></div></div>
</body>
</html>
