How to overlay div on CSS canvas

Question

I am trying to place a div over a canvas in HTML5 (as a kind of HUD). I use z-index , it does not work. How can I achieve this using any CSS?

  .HUD { z-index:100; } canvas { z-index:1; } 

Answer 1

Try the following:

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

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

We transfer the canvas and div to the container element, which is equal to position: relative . Then canvas and div set to position: absolute .

Answer 2

try something like this

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