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 <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>
这是 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 的叠加。
最佳答案
在我看来,您正在尝试同时使用两种不同的方法。
- 使用
position:absolute
属性已经导致您的#gameOver
div 独立于其他 block 设置位置,除了父级。 http://www.w3schools.com/cssref/pr_class_position.asp - 你试图让一个 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; }
关于html - 无法让 div 覆盖另一个包含 Canvas 的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29576376/