覆盖一个画布覆盖div

Question

我有一个div，我想覆盖一个完全相同的宽度，高度，填充和边距的顶部的画布。尽管我使用position：绝对像这里推荐的绝大多数问题，而z-index画布仍然显示在div下面。这是我到目前为止的代码。

<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：Z-索引是全局初始化，因为我需要分层在彼此顶部的多个画布和编辑最终取决于人的数量连

我在做什么错在这里？谢谢

Answer 1

几乎在那里。移动容器的宽度和高度，使其相对，编辑器和画布绝对定位在0,0，宽度/高度都为100％。编辑器的zIndex必须低于画布的zIndex。 fiddle