Can't get div to overlay another div containing a canvas - html

Question

Html looks like this:
<div id="content">
<div id="menu">
<img src="GFX/logo.png" class="centeredImage" />
<div class="menuItem">Play</div>
</div>
<div id="gameOver">
<div class="menuItem" id="finalScore"></div>
</div>
<div id="game">
<div style="float:left; width:600px">
<canvas id="canvas" width="600" height="900" style="">
Your browser doesn't appear to support the HTML5 <canvas> element.
</canvas>
</div>
<div id="info">
<img src="GFX/logo.png" id="logo" />
<div class="desciptor">Multiplier:</div>
<div id="multi" class="info"> 12</div>
<div class="desciptor">Score:</div>
<div id="score" class="info">452343</div>
<div class="desciptor">Level:</div>
<div id="level" class="info">466</div>
</div>
</div>
</div>
And this is the CSS:
body
{
background-color: black;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: 24px;
}
#content
{
width:900px;
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
}
#info
{
float:right;
width:260px;
height:860px;
background-color:#0f0f0f;
color:white;
padding:20px;
text-align:center;
}
#menu
{
display:block;
}
#game
{
display:block;
position:relative;
}
#logo
{
margin: -20px;
}
.centeredImage
{
display:block;
margin:auto;
}
.menuItem
{
padding-top:30px;
font-size:6em;
text-align:center;
}
a:link {text-decoration: none; color: white;}
a:visited {text-decoration: none; color: white;}
a:active {text-decoration: none; color: white;}
a:hover {text-decoration: none; color: white;}
.desciptor
{
padding-top:30px;
font-size:0.7em;
text-align:left;
width:inherit;
}
.info
{
width:inherit;
}
#multi {
font-size: 4em;
}
#score
{
font-size:2em;
}
#level
{
font-size:1.5em;
}
#gameOver
{
color: white;
position: absolute;
display:block;
padding-top:30px;
font-size:6em;
text-align:center;
height: 870px;
margin-top: -900px;
z-index: 999;
}
What I'm trying to achieve is to have the gameOver div overlay the game div and its content. Unfortunately this doesn't work as I do it. Any ideas ?
I'm not too sure about the display and position attributes and how they affect overlaying of divs.

Answer 1

Looks to me like you're trying to use two different methods simultaneously.
Using position:absolute attribute already causes your #gameOver div to set position independently of other blocks except for parenting. http://www.w3schools.com/cssref/pr_class_position.asp
You're trying to make one block overlap another with negative margin (but setting negative-margin to the wrong element)
This results in your #gameOver div to rest on top of your page (provided there's some content in #finalScore block)
To resolve your issue, do either one of the following:
Delete margin-top property from #gameOver
#gameOver {
color: white;
display: block;
font-size: 6em;
height: 870px;
margin-top: -900px;
padding-top: 30px;
position: absolute;
text-align: center;
z-index: 999;
}
Remove position: absolute; and margin-top: -900px; properties from #gameOver element and add margin-top: -900px; to your #game div. So your css will look like this:
#gameOver {
color: white;
display: block;
font-size: 6em;
height: 870px;
padding-top: 30px;
text-align: center;
z-index: 999;
}
#game {
display: block;
margin-top: -900px;
position: relative;
z-index: -1;
}