div&canvas重叠

<!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>