How to place two canvases on top of one another?

Question

I found similar topics but they all used absolute positioning which placed the canvases at the top left of the page. I have them contained within a div but I'm not sure exactly how to get them to layer properly. I tried using absolute and relative positioning in CSS but I wasn't having any luck.

Answer 1

Do this:

<style>
    #container { position: relative; }
    .canvas { position: absolute; top: 0; left: 0; }
</style>

<div id="container">
    <canvas class="canvas" id="canvas1"></canvas>
    <canvas class="canvas" id="canvas2"></canvas>
</div>

Answer 2

Make sure to add position: relative to the containing div in order to position the canvas elements absolutely within it.