Yerleşimi bir div

Question

Ben bir div var ve tam olarak aynı genişlik, yükseklik dolgu ve marjlar ile bunun üstüne bir tuval bindirmek isteyen üzerinden bir tuval. Her ne kadar pozisyonumu kullanmamıza rağmen: buradaki çoğu soru gibi mutlak tavsiye ve z-indeksi tuvalin hala div'in altında olduğunu gösteriyor. Bu şu ana kadar sahip olduğum kod.

<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: Ben burada yanlış yapıyorum birden tuvaller birbiri üstüne katmanlı ve editör sonunda insan sayısına bağlı olarak

bağlı gerektiğinden küresel zIndex başlatılır? Hemen oradakiler için

Answer 1

. Kabın üzerindeki genişlik ve yükseklikleri hareket ettirin, göreceli yapın ve editör ve kanvas% 100 genişlik/yükseklik ile kesinlikle 0,0 konumunda konumlandırın. Düzenleyicinizin zIndex, kanonuzun zIndex'dan daha düşük olmalıdır. fiddle