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

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

使用position:absolute属性已导致#gameOver div设置位置，而与其他块无关，除了为空。 http://www.w3schools.com/cssref/pr_class_position.asp
你试图让一个区块与另一个区块重叠，而负区为margin（但将负边距设置为错误的元素）

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

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

从margin-top

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

从position: absolute;元素移除margin-top: -900px;和#gameOver属性，并将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;
    }

无法获取div以覆盖另一个包含画布的div

1 个答案: