Two canvas' layered on top of each other in a div container?

Question

I been trying to get two canvas' to lay on top of each other whilst inside another div but they won't do it. They end up under each other.

The way i have set it up is like this:

.container{
    width:100%;
    height:300px;
    margin:0 auto;
}
.canvas{
    width:100%;
    height:100%;
    position:relative; 
    left: 0; 
    top: 0;
}

With this for output:

<div class="container">
  <canvas id="layer1" class="canvas" style="z-index:1;"></canvas>
  <canvas id="layer2" class="canvas" style="z-index:2;"></canvas>
</div>

Any idea how i can fix this ?

Answer 1

The parent container need to have position: relative set

Change your CSS accordingly:

.container{
   width:100%;
   height:300px;
   margin:0 auto;
   position: relative; /* add */
}
.canvas{
   width:100%;
   height:100%;
   position:absolute; /* change */
   left: 0; 
   top: 0;
}

Then change the class of the canvas containers to class="canvas" OR change the CSS to just canvas without the dot OR if you prefer change the CSS class to .c