Javascript 在 <canvas> 上显示 <div>
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3980642/
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
Displaying a <div> over a <canvas>
提问by Moncader
The problem, which exists in both Firefox and Chrome, is that I have a canvas with a solid background, and a div with a solid background color/image. The div is margined up over top of the canvas. The div does not display over the canvas. An interesting note is that if there is text inside the div it will properly get displayed. This would mean it's a browser bug... in both browsers. Here is some code for people that want to try it.
Firefox 和 Chrome 中都存在的问题是，我有一个带有纯色背景的画布和一个带有纯色背景颜色/图像的 div。div 在画布顶部有边距。div 不会显示在画布上。一个有趣的注意事项是，如果 div 中有文本，它将正确显示。这意味着它是一个浏览器错误......在两种浏览器中。这里有一些代码供想要尝试的人使用。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#d{background-color:#111;margin-top:-150px;z-index:999999;}
</style>
<script type="text/javascript">
function load() {
var c = document.getElementById("c").getContext("2d");
c.fillStyle = "rgba(255, 200, 200, 1)";
c.fillRect(0, 0, c.canvas.width, c.canvas.height);
}
</script>
</head>
<body onload="load()">
<canvas id="c" width="500" height="300"></canvas>
<div id="d" style="width:500px;height:300px"></div>
</body>
</html>
So, anybody have any workarounds? Or is there something that I missed in the HTML5 spec that says this is correct?
那么，有人有任何解决方法吗？或者我在 HTML5 规范中遗漏了什么说这是正确的？
As a note, please do not ask why I want to use margins instead of fixed/absolute/etc... alternatives. I need margins.
请注意，请不要问我为什么要使用边距而不是固定/绝对/等...替代方案。我需要保证金。
回答by Moses
This can only be fixed by applying the style:
这只能通过应用样式来解决：
#d {position:relative;}
or
或者
#d {position:absolute;}
回答by Davin
This occurred to me recently and instead of changing how it's laid out, I switched from divto using a spanwith display:inline-block.
我最近发生了这种情况，我没有改变它的布局方式，而是从div使用spanwith切换到了display:inline-block。
Works on Firefox/Chrome/Safari. Have not tested in IE.
适用于 Firefox/Chrome/Safari。没有在IE中测试过。
回答by Joshi
Use the following code, hope it helps you:
使用以下代码，希望对您有所帮助：
<head>
<style type="text/css">
#c{background-color:#000;z-index:-1;position: fixed;}
#d{background-color:#aa00aa;margin-top:-50px;z-index:0;}
</style>
<script type="text/javascript">
function load() {
var cntx = document.getElementById("c").getContext("2d");
cntx.fillStyle = "rgba(255, 200, 200, 1)";
cntx.canvas.top = "0";
cntx.canvas.left = "0";
cntx.fillRect(0, 0, cntx.canvas.width, cntx.canvas.height);
var obj = document.getElementById("d");
obj.style.position = "fixed";
obj.style.top = 50;
obj.style.left = 0;
}
</script>
</head>
<body onload="load()">
<canvas id="c" width="500" height="300"></canvas>
<div id="d" style="width:500px;height:300px"></div>
</body>
回答by albert
well i've read your question, and i understand you dont want to use position....whoever you have to use position to get z-index to work. position:relative literally is doing nothing in this case, save what you are requesting. here is a solution, although it relies on position:relative http://jsfiddle.net/jalbertbowdenii/Ar6Sh/
好吧，我已经阅读了您的问题，我知道您不想使用位置……无论您必须使用位置来让 z-index 工作。position:relative 在这种情况下实际上什么都不做，请保存您所请求的内容。这是一个解决方案，虽然它依赖于位置：相对 http://jsfiddle.net/jalbertbowdenii/Ar6Sh/
回答by Chango
Adding a position:relative; (or absolute) to #d seems to work in both chrome and firefox. No idea why, if you ask me. Is that good for you?
添加位置：相对；（或绝对）到 #d 似乎在 chrome 和 firefox 中都有效。不知道为什么，如果你问我。这对你有好处吗？
