Question

I have the following HTML code:

<div class="reflect" style="width: 348px; height: 327px; overflow-x: hidden; overflow-y: hidden; ">
    <img id="image" class="reflected" 
         src="http://domain.com/1-1.png" 
         style="display: block; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial;">
    <canvas width="348" height="54" 
        style="display: block; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; margin-top: -50px;"></canvas>
</div>

I want the canvas element to appear below the IMG. Right now, the canvas is on top of the image, 50px part of it on top (see margin-top: 50px). I’ve tried setting z-index to each element with no success. Need your help in solving this one.

Answer 1

You need to have a look at absolute positing of elements and z-index

If you position the img absolutely, set the z-index, and then remove the margin-top from the canvas element, this should work.