對象未按z索引進行排序

-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>

預期的行爲（僅通過瀏覽器）所觀察到的行爲（IE，邊，原生的Android瀏覽器）

來源

2017-04-03 user5555232

很奇怪

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

那就是右

來源

2017-04-03 16:04:08 user5555232

對象未按z索引進行排序

回答

相關問題