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

Question

Html looks like this:

<div id="content">
    <div id="menu">
        <img src="GFX/logo.png" class="centeredImage" />
        <div class="menuItem"><a href="#" onclick="WebGL.Program.StartGame()">Play</a></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 &lt;canvas&gt; 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.

1. 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
2. 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;
    }