有人能帮我吗:我想在一个HTML页面上,把一个大小为10px x 10px的div元素放在一个大小为500px x 500px的canvas元素的前面。我已经尝试过更改它们的z-index,但没有成功。有人有什么好的想法吗?还是这种情况真的无法实现?我已经知道如何使用绝对定位等技术,但是div元素仍然停留在canvas元素后面。我需要一种方法将其置于前景,而将canvas元素置于背景。
谢谢!
绝对定位的工作方式通常是,代码中较早出现的元素在后面出现的元素之后。如果要改变这一点,确实需要使用 z-index 属性。请注意,z-index 只能作用于已被定位的元素。
可能会让你感到困惑的另一件事情是,所有已被定位的元素都像 z-index 的“容器”一样起作用。因此,如果你的 <div>
恰好出现在文档的前面并且在另一个已被定位的容器中,它可能会被限制在其祖先的 z-index 层中,而无法跨越并显示在 <canvas>
上方。如果是这种情况,你需要稍微修改你的 CSS 或重新排列页面,以使 <div>
处于适当的位置。
这取决于您的元素所在的位置。
要使用 z-index,您必须将位置设置为相对或绝对。
img
标记,如下所示。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;'> </div>
<canvas id='canvas' style='z-index : 30;'></canvas>
<div id='layer1' style='z-index : 10;'></div>
顺便说一下,我的主页是用日语写的。
我似乎没有遇到同样的问题。我在JSbin上创建了一个示例画布/ div,就像你在这里谈论的一样:http://jsbin.com/adowo/edit
那是你要找的吗?还是我漏掉了什么?
我花了一点时间来调整它,最终在将我想要放在背景中的元素的 z-index 设置为-1(而不是某个正数)后使其工作。
XHTML
<div id="canvas">
<div id="topelement">
</div>
</div>
CSS样式
#canvas { height: 500px; width: 500px; overflow: hidden; }
#topelement { height: 10px; width: 10px; float: left; }
<canvas>
,而不是一个 id 为 "canvas" 的东西。 - Xanthir