-1
div 캔버스 오브젝트를 div에 넣으면 다른 맨 아래에 순서가 지정됩니다. 그러나 다른 것 위에 아닙니다. Chrome 브라우저 만 원하는대로 작동합니다.오브젝트가 Z- 인덱스로 정렬되지 않습니다.
어디서 실수입니까?
window.onload = function() {
var div = document.createElement("div")
div.style = "position: relative; height:100%; width:100%;"
document.body.appendChild(div)
var element = document.createElement('canvas');
element.width = 800;
element.height = 300;
element.style = "position: absolute; left: 0; top: 0; z-index: 0;"
var cvs = element.getContext('2d');
cvs.fillStyle = 'rgba(200, 200, 200, 155)';
cvs.fillRect(0, 0, 800, 300);
div.appendChild(element);
element = document.createElement('canvas');
element.width = 800;
element.height = 300;
element.style = "position: absolute; left: 0; top: 0; z-index: 1;"
cvs = element.getContext('2d');
cvs.fillStyle = 'rgba(0, 255, 0, 155)';
cvs.fillRect(100, 50, 600, 200);
div.appendChild(element);
}<body bgcolor="#ffffff" style="height:100%; overflow:hidden; margin:0;">
<div id="sample" style="position: relative; height:100%; width:100%;"></div>
</body>매우 이상한 
관찰 된 행동 (전용 크롬에 의해) 예상 된 동작 (IE, 에지, 네이티브 안드로이드 브라우저) 