html - 无法让 div 覆盖另一个包含 Canvas 的 div

Question

HTML 看起来像这样:

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

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

我想要实现的是让 gameOver div 覆盖游戏 div 及其内容。不幸的是，这对我来说不起作用。有什么想法吗？

我不太确定显示和位置属性以及它们如何影响 div 的叠加。

Answer 1

在我看来，您正在尝试同时使用两种不同的方法。

1. 使用position:absolute 属性已经导致您的#gameOver div 独立于其他 block 设置位置，除了父级。 http://www.w3schools.com/cssref/pr_class_position.asp
2. 你试图让一个 block 与另一个 block 重叠，并且 margin 为负(但将 negative-margin 设置为错误的元素)

这会导致您的 #gameOver div 停留在您的页面顶部(前提是 #finalScore block 中有一些内容)

要解决您的问题，请执行以下任一操作:

• 从 #gameOver 中删除 margin-top 属性

    #gameOver {        color: white;        display: block;        font-size: 6em;        height: 870px;        margin-top: -900px;        padding-top: 30px;        position: absolute;        text-align: center;        z-index: 999;    }

• 从 #gameOver 元素中删除 position: absolute; 和 margin-top: -900px; 属性并添加 margin-top : -900px; 到你的 #game div。所以你的 CSS 看起来像这样:

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