我试图将 div 元素放置在页面中心的画布上(用于游戏)。这是关于我想在开始游戏之前在画布上显示的开始屏幕(这个开始屏幕有“玩游戏”、“设置”等选项)。问题是我无法完成这个工作,我在谷歌上搜索了很多,我看过很多例子,但它们似乎都不适合我。这是我的代码:
<div id="gamecontainer">
<canvas id="myCanvas" width="800" height="600">
Sorry, <strong>CANVAS</strong> is not supported by your browser. Get a more recent one to play my game!
</canvas>
<div id="gamestartscreen" class="gamelayer">
<img src="images/icons/play.png" alt="Play Game" onclick="alert('ceve');"><br>
<img src="images/icons/settings.png" alt="Settings">
</div>
</div>
这是CSS:
#gamecontainer {
width: 800px;
height: 600px;
background-color: beige;
border: 1px solid black;
position: relative;
margin: 0 auto;
}
.gamelayer {
width: 800px;
height: 600px;
position: absolute;
display: none;
z-index: 0;
}
/* Screen for the main menu (Like Play, Settings, etc.) */
#gamestartscreen {
position: relative;
margin: 0 auto;
}
#gamestartscreen img {
margin: 10px;
cursor: pointer;
}
有人可以告诉我我哪里做错了吗?
问题在于画布层处于其本机静态定位,而 gamestart div 处于相对定位且没有正 z-index 值。本质上,您只需将画布元素设置为position: absolute
甚至position: relative
,同时startstreen div 的 z-index >1。这JSFiddle http://jsfiddle.net/n992V/应该让一切都清楚。
干杯!
#gamecontainer {
width: 800px;
height: 600px;
background-color: beige;
border: 1px solid black;
position: relative;
margin: 0 auto;
}
canvas {
position: absolute;
z-index: 1;
}
#gamestartscreen {
position: absolute;
margin: 0 auto;
z-index: 2;
background: red;
}
<div id="gamecontainer">
<canvas id="myCanvas" width="800" height="600">
Sorry, <strong>CANVAS</strong> is not supported by your browser. Get a more recent one to play my game!
</canvas>
<div id="gamestartscreen" class="gamelayer">
Hello world!
</div>
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)