<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>div&canvas重叠</title>
<style>
.div-relative{position:relative; color:#000; border:1px solid #000; width:500px; height:400px}
.div-a{ position:absolute; left:30px; top:30px; background:#F00; width:400px; height:100px;z-index:30;}
/* css注释说明： 背景为红色 */
.div-b{ position:absolute; left:30px; top:40px; background:#FF0; width:400px; height:200px;z-index:20;}
/* 背景为黄色 */
.div-c{ position:absolute; left:30px; top:50px; background:#00F; width:400px; height:100px;z-index:10;}
/* DIV背景颜色为蓝色 */
</style>
</head>
<body>
<div class="div-relative">
<canvas id="myCanvas" width="500" height="400" style="border:1px solid #c3c3c3;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<div class="div-a">我背景为红色</div>
<div class="div-b"></div>
<div class="div-c"></div>
</div>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#00fff0";
ctx.fillRect(0,0,500,400);
</script>
</body>
</html>