Placing div over canvas in html5

Question

I am trying to place a div element above the canvas (this is for the game) in the center of my page. This is a start screen, which I want to show on top of the canvas, before starting the game (this start screen has options such as "Play the game", "Settings", etc.). The problem is that I cannot do this, I searched a lot on Google, I saw a lot of examples, but none of them seem to work for me. Here is my code:

<div id="gamecontainer"> <canvas id="myCanvas" width="800" height="600"> Sorry, <strong>CANVAS</strong> is not supported by your browser. Get a more recent one to play my game! </canvas> <div id="gamestartscreen" class="gamelayer"> <img src="images/icons/play.png" alt="Play Game" onclick="alert('ceve');"><br> <img src="images/icons/settings.png" alt="Settings"> </div> </div> 

here is the css:

 #gamecontainer { width: 800px; height: 600px; background-color: beige; border: 1px solid black; position: relative; margin: 0 auto; } .gamelayer { width: 800px; height: 600px; position: absolute; display: none; z-index: 0; } /* Screen for the main menu (Like Play, Settings, etc.) */ #gamestartscreen { position: relative; margin: 0 auto; } #gamestartscreen img { margin: 10px; cursor: pointer; } 

Can someone please tell me where I am doing this wrong?

Answer 1

The problem was that the canvas layer was in its own static positioning, while the div gamestart div was in relative positioning without a positive z-index value. Essentially, you need to set the canvas element to position: absolute or even position: relative , while having> 1 z-index for the startstreen div. This JSFiddle should clarify the situation. Hooray!