Auflage a canvas over a div

Ich habe ein div, und ich will überlagerung einer Leinwand genau auf die gleiche Breite, Höhe, Polsterung und Margen. Zwar bin ich mit position: absolute wie die meisten Fragen hier empfehlen-und z-index des canvas-Bereichs ist immer noch, unter den div. Dies ist der code, den ich bis jetzt.

<div id ="editor-section">  
     <div class="editable" id="editor"></div>
</div> 

//the canvas is created /removed dynamically on connection /disconection 
hub.client.broadcastSomeoneConnected = function (connectionId, someoneConnected) 
{
    if (someoneConnected) {
        var canvas = document.createElement("canvas");
        canvas.id = connectionId;
        canvas.className = 'canvases';
        canvas.style.border = '2px solid red';
        canvas.style.zIndex = zindex;  
        zindex++;

        var parentDiv = document.getElementById("editor-section");
        parentDiv.appendChild(canvas);

    } else { //someone disconnected

        var canvas = document.getElementById(connectionId);
        canvas.parentNode.removeChild(canvas);
    }
 }

 //css for all canvases
 .canvases {
     width:60%; 
     height:700px;
     border:1px solid;
     position:absolute;
     padding: 5%;
     margin-left:20px;
     pointer-events: none;
 }

 //css for editor div
 #editor {
     padding: 5%;
     margin-left:20px;
     border: 2px solid black;
     overflow-y:scroll;
     height: "700px";
     width: "100%";
     background-color: white;
     margin-bottom:30px;
 }

PS: zindex initialisiert ist Global, weil ich mehrere Leinwände überlagert auf der jeweils anderen und der editor schließlich abhängig von der Anzahl der Menschen verbunden

Was mache ich hier falsch? Dank

InformationsquelleAutor Bernice | 2013-05-11