How To Overlay A Div Over A Canvas Css

I'm trying to place a div over a canvas in HTML5 (as a HUD of sorts). I'm using z-index, it's not working. How can I achieve this using any CSS? .HUD { z-index:100;

Solution 1:

Try this:

#container {
  position: relative;
}
#containercanvas, #overlay {
  position: absolute;
}
canvas {
  border: 1px solid black;
}

<divid="container"><canvas></canvas><divid="overlay">This div is over the canvas</div></div>

We wrap the canvas and div in a container element, which is position: relative. Then the canvas and div are set to position: absolute.

Solution 2:

try something like this

<div class="container_div" style="position:relative;">
    <divclass="hover_div"style="position:absolute; width:25px !important; display:block;z-index:9999"><imgclass="some_class"src="/settings_icon.png"style="height: 20px; display: block;"></div><canvaswidth="180"height="270"style="width: 180px; height: 270px;"></canvas></div>