在html 5中，如何将div元素放置在canvas元素的顶部？

任何人都可以帮助我：我试图在html中放置一个div元素（比如说，10px x 10px）在canvas元素的顶部（前面）（比如说500px x 500px）。我试图改变每个Z指数，无济于事。有没有人有任何想法，或者这是你不能真正做的事情之一？我已经知道如何做绝对定位和一切，div元素只是挂在画布元素后面的背景中。我需要一种方法将它放在前面，将画布元素放到后面。在html 5中，如何将div元素放置在canvas元素的顶部？

谢谢！

来源

2010-04-20 Unraised

-7

XHTML

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

CSS样式

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

来源

2010-04-20 00:20:33

您完全误解了关于'

这取决于您的元素。

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

来源

2010-04-20 00:24:26 Emmanuel

我似乎没有同样的问题。我创建了一个样本画布/ div，就像你在JSbin所说的那样：http://jsbin.com/adowo/edit

这就是你要找的东西？或者我错过了什么？

来源

2010-04-20 01:15:01 RussellUresti

可能是浏览器问题？如果OP指定了他们正在使用的内容，它可能会有帮助... – 2010-04-20 01:38:04

我尝试了Firefox和Chrome浏览器......我不认为IE支持画布，所以我不认为他们正在尝试，但是，更多信息会有所帮助。 – RussellUresti 2010-04-20 01:51:39

绝对定位的工作方式是，通常情况下，代码中较早的元素位于代码后面的元素之后。要改变你确实使用z-index。但请注意，z-index仅适用于定位的元素。

另一件可能会让你绊倒的事是全部定位元素的行为就像z-index“容器”一样。因此，如果您的<div>碰巧早于文档和另一个定位的容器中，则它可能会绑定到其祖先的z-index层，因此不能在<canvas>之上转义并显示。如果是这种情况，您可能需要稍微重写CSS或重新整理页面，以便<div>处于良好状态。

来源

2010-04-27 17:33:42 Xanthir

与OP相同的问题：“但请注意，z-index仅适用于定位的元素。”是我所需要的。谢谢@Xanthir – Morvael 2016-06-05 16:33:01

有时这可能会发生在我的经验。我不知道html5画布API中发生了什么。如果你想在div元素下绘制一些图，可以使用img标签，下面列出。

---此示例代码被写入用的prototype.js（1.6）---

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

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

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

来源

2010-11-24 13:09:43

我用这个小小的一阵子，终于在将背景中想要的东西的z-index设置为-1（而不是某个正数）之后，它才开始工作。

来源

2011-01-14 17:19:41 galactikuh

在html 5中，如何将div元素放置在canvas元素的顶部？

回答

相关问题