Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to overlay a div over a canvas CSS

Tags:

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;
    }

    canvas {
        z-index:1;
    }
like image 771
user3105120 Avatar asked Nov 07 '14 02:11

user3105120


People also ask

How do I overlay a div in canvas?

We wrap the canvas and div in a container element, which is position: relative . Then the canvas and div are set to position: absolute . This is a great answer... but... When I have a large <div> the canvas element bleeds right thru the div, no matter what the z-index, the background color or background-image?

How do I overlay a div in CSS?

You can use the CSS position property in combination with the z-index property to overlay an individual div over another div element. The z-index property determines the stacking order for positioned elements (i.e. elements whose position value is one of absolute , fixed , or relative ).

Can you put a div in a canvas?

You cannot place elements inside a canvas (and have both displayed); they are only displayed if the browser does not understand the canvas element.

How do I overlap a div over an image?

Use z-index and top . This will layer the div on bottom, the image and then the span (overlay) on top. To set the positioning from the top edge, use top , which can be used with negative numbers if you need it to be higher on the Y axis than it's parent.


Video Answer


2 Answers

Try this:

#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 wrap the canvas and div in a container element, which is position: relative. Then the canvas and div are set to position: absolute.

like image 180
soktinpk Avatar answered Sep 20 '22 12:09

soktinpk


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>
like image 27
Aameer Avatar answered Sep 17 '22 12:09

Aameer