Добавить холст в тело документа, используя JS

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 и добавить его. Иначе это просто отдельный элемент, который браузер неправильно отображает.

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

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

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