-1
私がCanvasオブジェクトの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>非常に奇妙な 
観察された行動（Chromeのみによる）予想される動作（IE、エッジ、ネイティブのAndroidブラウザ） 