Sovrapporre una tela su un div

Question

Ho un div e voglio sovrapporre una tela esattamente sopra di essa con la stessa larghezza, altezza, imbottitura e margini. Anche se sto usando la posizione: assoluta come la maggior parte delle domande qui raccomandate e lo z-index che la tela sta ancora mostrando sotto il div. Questo è il codice che ho fino ad ora.

<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 viene inizializzata a livello globale, perché ho bisogno di più tele stratificate su uno sopra l'altro e l'editor eventualmente a seconda del numero di persone collegate

Che cosa sto facendo male qui? Grazie

Answer 1

Quasi lì. Sposta larghezza e altezza sul contenitore, rendilo relativo, e l'editor e la tela sono posizionati in modo assoluto a 0,0 con larghezza/altezza pari al 100%. Il zIndex del tuo editor deve essere inferiore allo zIndex dell'area di disegno. fiddle