Question

如果我将几个Canvas对象放入其中，那么他们会在其他底部订购一个。但不是其他人。只有Chrome浏览器能像我想的那样工作。

哪里出错？

＆＃13;

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

＆＃13;

<body bgcolor="#ffffff" style="height:100%; overflow:hidden; margin:0;">

  <div id="sample" style="position: relative; height:100%; width:100%;"></div>
</body>

＆＃13;

预期行为（仅限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排序的

1 个答案: