Positionning HTML elements on top of Canvas (or any other element)

Positionning HTML elements on top of Canvas (or any other element)

ELEMENT

First at HTML level use a common ancestor container for the Canvas element and elements to place on top of it...

<div id="wrapper">
    <canvas></canvas>
    <span class="childs">ELEMENT</span>
</div>

Second at CSS level:

give position:relative; and display:inline-block; CSS property to the container: last one will shrink the container to it child (Canvas) width size and first one will keep them in the normal flow of the page HTML elements content, while be used as reference by the HTML element to be positionned on top of canvas.
give vertical-align:middle; to the Canvas element to prevent disgracious space as bottom of it inside the container (elements are default vertical-aligned to the text base-line)
give position:absolute; to the others container childs to remove them from the normal flow of the page HTML elements contents, so they are displayed on top of Canvas...

#wrapper {
    position:relative;
    display:inline-block;
    border:2px solid red; /* not required: visual purpose only */
}
.childs {
    position:absolute;
    background:yellow; /* not required: visual purpose only */
}
canvas {
    vertical-align:middle;
    background:silver; /* not required: visual purpose only */
}

• Z-index is not required, even if Canvas element was not put before the positionned elements, because Canvas is not positionned itself (in the container).
• Z-index would be useful to modify the z-order of positionned elements, in case of their order in HTML would not match the expected z-order (last one on top of previous one).

Above example use a class to be able to style many elements with the same CSS properties; another way to do that could be to use:

#wrapper > *:not(:first-child) {
    position:absolute;
}

... to select all container direct childs but the first one (Canvas).

Next and last step is to position/locate the on-top childs elements where you want relatively to the container/canvas (default is to be placed at top left corner). For that you should one or many of the top, bottom, left, right CSS properties to specifiy the distance from each you want the element to be (with CSS distance units).
Above displayed example use (for center it both vertical and horizontal):

.childs {
    top:50%; /* element top side at 50% of container top side */
    left:50%; /* element left side at 50% of container left side */
    transform:translate(-50%,-50%); /* translate element of half itself size to the left and to the top */
}

Obviously, if you have many elements to position on top of once element, you should give this last properties independently for each one, so you probably set them with id selector ;)