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..

    CSS: How to create buttons with reflected shine similar to iOS icons?

    How to apply same event to multiple buttons?

    When I print my webpage I lose all the css colouring. Is there an option or script to print a webpage exactly how it looks?

    Image rotation in IE causes automatic translation. How do I remove the translation?

    How can I redirect a request file to real folder with htaccess?

    How to make a smoother animation with jQuery UI slide effect

    How to select only top-level li in recursive menu?

    How to put image on the top of the div?

    How to know that a time consuming CSS operation (rendering) has completed

    How set css style to GWT TextBox text?

    how to force page break between absolutely positioned elements in css

    how can I center button below my text while using bootstrap css?

    How do I get my menu to drop down? CSS & HTML

    How to vertically align text in my columns? [closed]

    How to remove gap in masonry?

    How do I make the textbox close to the text label

    How can I push the first row of images down?

    Show all text document

    How do I modify this script to use different colors?

    How can I vertical align my
  • to the top of this box which uses `display: flex`?
  • How to remove the lines that are being generated beneath my bootstrap navbar

    CSS: how to make bottom div width same as the width of image above?

    How to edit horizantal drop down menu

    How to display a div over other containts of an html page?

    How to create an image hover fade effect with jQuery and CSS?

    How to Prevent Opacity for Sub Div using Jquery

    How do I make elements flow horizontally instead of vertically?

    How to copy external CSS and JavaScript in XSLT

    How to have two items be placed next to each other in HTML?

    How to add links to tabbing order when they're made visible with CSS?