解决在HTML中canvas图层一直在最上层问题

解决在HTML中canvas图层一直在最上层问题

问题

在用canvas做动画效果时，会把之前的页面内容遮挡，用position:relative; z-index:-1"也没办法解决；

<canvas class="main-canvas" id="main-canvas"></canvas>

 解决

在canvas套上div盒子，在div中设置position:relative; z-index:-1"，来把canvas的层级降低。

<div style="position:relative; z-index:-1"  >
    <canvas class="main-canvas" id="main-canvas"></canvas>
</div>