对象不是按 z-index 排序的答案

【问题标题】：Objects aren't ordering by z-index对象不是按 z-index 排序的
【发布时间】：2017-08-28 13:32:15
【问题描述】：

如果我将几个 Canvas 对象放入 div 中，它们将按顺序排列。但不是一个比一个。只有 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、原生安卓浏览器）

【问题讨论】：

标签： javascript html dom canvas z-index

【解决方案1】：

很奇怪

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

没错

【讨论】：