Question

我正在尝试向我的html文档添加一个画布，使其位于0,0位置并覆盖在所有其他元素之上。我做过一些研究，无论如何，我认为我做的是正确的事情：

canvas.style.position = "absolute";
canvas.style.left = "0px";
canvas.style.top = "0px";
canvas.style.zIndex = "100";
body.appendChild(canvas);

但是，画布显示在文档的底部，而不是位于所有元素上方的左上角。绝对位置和设置坐标应该可以解决问题，不是吗？

Answer 1

只需添加一个新的div，它将位于内容之前，并且只是将其定位为

<div class="canvas-placement">
</div>

的jQuery

canvas.style.position = "absolute";
canvas.style.left = "0px";
canvas.style.top = "0px";
canvas.style.zIndex = "100";
$('.canvas-placement').append(canvas);

Answer 2

两种适合我的方法：http://jsfiddle.net/Screetop/8z5ou7L4/2/ 只需在正文前添加文档，或在文档中搜索tagName正文并追加。否则，它只是浏览器无法正确呈现的分离元素。

＆＃13;

var canvas = document.createElement('canvas');
canvas.style.position = "absolute";
canvas.style.left = "0px";
canvas.style.top = "0px";
canvas.style.zIndex = "100";
canvas.style.background = 'red';
document.body.appendChild(canvas);

var canvas = document.createElement('canvas');
canvas.style.position = "absolute";
canvas.style.right = "0px";
canvas.style.top = "0px";
canvas.style.zIndex = "100";
canvas.style.background = 'purple';
document.getElementsByTagName('body')[0].appendChild(canvas);

＆＃13;

.test {
    height: 500px; 
    width: 100%;
    background: blue;
}

＆＃13;

<div class="test"></div>

＆＃13;

使用JS将画布附加到文档正文

2 个答案: