在 html 5 中，如何将 div 元素定位在 canvas 元素之上？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2671699/
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
In html 5, how to positioning a div element on top of a canvas element?
提问by Unraised
Can anyone help me: I'm trying to put a div (say, 10px by 10px) element on top (in front) of a canvas element (say 500px by 500px) in html. I have tried changing the z-index of each, to no avail. Does anybody have any ideas, or is it one of those things that you can't really do? I already know how to do absolute positioning and everything, the div element just hangs out in the background behind the canvas element. I need a way to bring it to the front and the canvas element to the back.
任何人都可以帮助我：我正在尝试在 html 中的画布元素（比如 500 像素 x 500 像素）的顶部（前面）放置一个 div（比如 10 像素 x 10 像素）元素。我曾尝试更改每个的 z-index，但无济于事。有没有人有任何想法，或者这是您无法真正做到的事情之一？我已经知道如何做绝对定位和所有事情，div 元素只是挂在画布元素后面的背景中。我需要一种方法将它放在前面并将画布元素放在后面。
Thanks!
谢谢！
回答by Xanthir
The way absolute positioning works is that, in general, elements that are earlier in the code are behind elements that are later in the code. To change that you do indeed use z-index. Note, though, that z-index only works on elements that are positioned.
绝对定位的工作方式是，通常，代码中较早的元素位于代码中较晚的元素之后。要改变这一点，你确实使用 z-index。但是请注意，z-index 仅适用于已定位的元素。
Another thing that may be tripping you up is that allpositioned elements act like z-index "containers". So if your <div>happens to be earlier in the document and in another positioned container, it may be bound to the z-index layer of its ancestor, and so can't ever escape and display on top of the <canvas>. If this is the case, you'll either have to slightly rewrite your CSS or rearrange your page so that the <div>is in a good spot.
另一件可能让您感到困惑的事情是所有定位的元素都像 z-index “容器”。因此，如果您<div>恰好在文档中的较早位置和另一个定位的容器中，则它可能绑定到其祖先的 z-index 层，因此永远无法转义并显示在<canvas>. 如果是这种情况，您将不得不稍微重写您的 CSS 或重新排列您的页面，以便它<div>处于一个好的位置。
回答by Emmanuel
That depends on where your elements are.
这取决于你的元素在哪里。
To use z-index you must set the position to either relative or absolute.
要使用 z-index，您必须将位置设置为相对或绝对。
回答by RussellUresti
I don't seem to have the same problem. I created a sample canvas / div like you're talking about here at JSbin: http://jsbin.com/adowo/edit
我似乎没有同样的问题。我创建了一个示例画布/div，就像您在 JSbin 中所说的那样：http://jsbin.com/adowo/edit
Is that what you're looking for? Or am I missing something?
这就是你要找的吗？或者我错过了什么？
回答by mike_neck
Sometimes this may occur in my experiences.
I don't know what is happening in the html5 canvas API.
If you want draw some figure under the div element, use imgtag instead, listed bellow.
有时这可能会发生在我的经历中。我不知道 html5 canvas API 中发生了什么。如果您想在 div 元素下绘制一些图形，请改用imgtag，如下所列。
--- this sample code is written with prototype.js(1.6) ---
--- 此示例代码是用prototype.js(1.6) 编写的---
<-javascript-code->
<-javascript-代码->
var canvas = $('canvas');
canvas.width = 200;
canvas.height = 200;
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(100, 100, 100, 0, - 360 * Math.PI / 180, true);
ctx.fillStyle = 'rgba(204, 204, 255, 1)';
ctx.strokeStyle = 'rgba(0, 51, 153, 1)';
ctx.fill();
ctx.stroke();
var imgStr = canvas.toDataURL();
var element = new Element('img', {'src' : imgStr);
var target = $('layer1');
target.insert(element);
<- html ->
<- html ->
<div id='layer2' style='z-index : 50;'> </div>
<canvas id='canvas' style='z-index : 30;'></canvas>
<div id='layer1' style='z-index : 10;'></div>
By the way, my home page is written in Japanese.
顺便说一下，我的主页是用日语写的。
回答by galactikuh
I futzed with this for a little while and finally got it to work after setting z-index of the thing I want in the background to -1 (versus some positive number).
我对此感到困惑了一会儿，终于在将我想要在后台的东西的 z-index 设置为 -1（而不是一些正数）后让它工作。
回答by Nick Rassette
XHTML
XHTML
<div id="canvas">
<div id="topelement">
</div>
</div>
Css Styling
CSS 样式
#canvas { height: 500px; width: 500px; overflow: hidden; }
#topelement { height: 10px; width: 10px; float: left; }
