Html 如何在画布 CSS 上覆盖 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26793247/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to overlay a div over a canvas CSS
提问by user3105120
I'm trying to place a div over a canvas in HTML5 (as a HUD of sorts). I'm using z-index, it's not working. How can I achieve this using any CSS?
我正在尝试在 HTML5 中的画布上放置一个 div（作为各种 HUD）。我正在使用z-index，它不起作用。如何使用任何 CSS 实现这一点？
.HUD {
z-index:100;
}
canvas {
z-index:1;
}
回答by soktinpk
Try this:
尝试这个：
#container {
position: relative;
}
#container canvas, #overlay {
position: absolute;
}
canvas {
border: 1px solid black;
}<div id="container">
<canvas></canvas>
<div id="overlay">This div is over the canvas</div>
</div>We wrap the canvasand divin a container element, which is position: relative. Then the canvasand divare set to position: absolute.
我们将canvas和包装div在一个容器元素中，即position: relative。然后将canvas和div设置为position: absolute。
回答by Aameer
try something like this
尝试这样的事情
<div class="container_div" style="position:relative;">
<div class="hover_div" style="position:absolute; width:25px !important; display:block;z-index:9999">
<img class="some_class" src="/settings_icon.png" style="height: 20px; display: block;">
</div>
<canvas width="180" height="270" style="width: 180px; height: 270px;"></canvas>
</div>
