在HTML5中，如何将一个div元素定位在一个canvas元素的顶部？

Question

有人能帮我吗：我想在一个HTML页面上，把一个大小为10px x 10px的div元素放在一个大小为500px x 500px的canvas元素的前面。我已经尝试过更改它们的z-index，但没有成功。有人有什么好的想法吗？还是这种情况真的无法实现？我已经知道如何使用绝对定位等技术，但是div元素仍然停留在canvas元素后面。我需要一种方法将其置于前景，而将canvas元素置于背景。

谢谢！

- Unraised

Answer 1

绝对定位的工作方式通常是，代码中较早出现的元素在后面出现的元素之后。如果要改变这一点，确实需要使用 z-index 属性。请注意，z-index 只能作用于已被定位的元素。

可能会让你感到困惑的另一件事情是，所有已被定位的元素都像 z-index 的“容器”一样起作用。因此，如果你的 <div> 恰好出现在文档的前面并且在另一个已被定位的容器中，它可能会被限制在其祖先的 z-index 层中，而无法跨越并显示在 <canvas> 上方。如果是这种情况，你需要稍微修改你的 CSS 或重新排列页面，以使 <div> 处于适当的位置。

- Xanthir

---

和 OP 一样的问题：“请注意，z-index 只适用于已定位的元素。” 这就是我所需要的。谢谢 @Xanthir - Morvael

Answer 2

这取决于您的元素所在的位置。

要使用 z-index，您必须将位置设置为相对或绝对。

- Emmanuel

Answer 3

有时在我的经验中可能会发生这种情况。 我不知道在html5画布API中发生了什么。 如果要在div元素下绘制某些图形，请改用img标记，如下所示。

--- 这个示例代码是用prototype.js（1.6）编写的 ---

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 ->

<div id='layer2' style='z-index : 50;'>&nbsp;</div> 
<canvas id='canvas' style='z-index : 30;'></canvas>
<div id='layer1' style='z-index : 10;'></div>

顺便说一下，我的主页是用日语写的。

- mike_neck

Answer 4

我似乎没有遇到同样的问题。我在JSbin上创建了一个示例画布/ div，就像你在这里谈论的一样：http://jsbin.com/adowo/edit

那是你要找的吗？还是我漏掉了什么？

- RussellUresti

---

可能是浏览器问题吗？如果楼主能够说明他们使用的是什么浏览器，这或许会有所帮助... - Weston C

我在Firefox和Chrome中尝试过...我不认为IE支持canvas，所以我不认为他们会尝试，但是更多的信息会很有帮助。 - RussellUresti

Answer 5

我花了一点时间来调整它，最终在将我想要放在背景中的元素的 z-index 设置为-1（而不是某个正数）后使其工作。

- galactikuh

Answer 6

XHTML

<div id="canvas">
   <div id="topelement">
   </div>
</div>

CSS样式

#canvas { height: 500px; width: 500px; overflow: hidden; }
#topelement { height: 10px; width: 10px; float: left; }

- Nick Rassette

---

你完全误解了问题，问题是关于 <canvas>，而不是一个 id 为 "canvas" 的东西。 - Xanthir