对象不按 z-index 排序

Question

如果我放入 div 一对 Canvas 对象，它们会依次排序。但不是一个超过另一个。只有 Chrome 浏览器按我的要求工作。

错在哪里？

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、Edge、原生 android 浏览器）

Answer 1

很奇怪

element.setAttribute('style', "position: absolute; left: 0; top: 0; z-index: 1;")
//element.style="position: absolute; left: 0; top: 0; z-index: 1;"

没错

对象不按 z-index 排序

Objects aren't ordering by z-index

html

javascript

dom

canvas

z-index