How to overlay a div over a canvas CSS


Tags: html,css,html5,html5-canvas

Problem :

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


Solution :

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.


    CSS Howto..

    how to set menu to activate always hover effect on [closed]

    How to add styles to wordpress default menu

    How to Highlight the Menu in css. I used a:active but it does not serve the purpose I expected

    How to handle right-to-left text-input fields the right way?

    How do I make these buttons stay activated after clicking on them?

    How to override css property to default?

    How do I make images interactive?

    CSS: How to make an input box stretch to the width of its given absolute position left and right value?

    R shiny: How to change the width of a progress-bar

    How can I fix my CSS/HTML that uses input:checked, to prevent radio button movement?

    how to define minimum height for tbody in css

    How to include button text and links as part of css

    How to make nav menu fall onto the page?

    How to make DIV constantly display text on click?

    How to get CSS of element (% vs px)

    (CSS) How to Shorten CSS code

    Jquery Ui Sortable showing broken image in IE8

    Can someone help me to know how I can make my layout work in small screen using css , css3?

    CSS: how to make a span only as wide as its content

    How to style a PHP generated label?

    How do I make the Android WebView not ignore the 'height' css property?

    How to vertically center content in before or after in CSS

    How can I compute a percentage based margin with LESS css?

    How to remove white border from blur background image

    How to load .css file from parent directory with .htaccess rule?

    How to avoid overlapping text using CSS?

    How to fix a element (have example) on the screen using jquery /css?

    How to translate html, css and js into one javascript (animation)

    How to avoid double borders on list of divs

    How to change the width of bootstrap popover