-1
Wenn ich in div Paar von Canvas-Objekte setzen, bestellen sie einen unteren anderen. Aber nicht einer über den anderen. Nur Chrome-Browser funktionieren wie ich will.Objekte werden nicht von Z-Index bestellt
Wo ist der Fehler?
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>Das erwartete Verhalten (nur von Chrome) 
Das beobachtete Verhalten (IE, Edge nativen Android-Browser) 