divにキャンバスをオーバーレイする

Question

私はdivを持っており、同じ幅、高さ、パディング、マージンを持つキャンバスの上に正確にオーバーレイしたいと考えています。私はポジションを使用していますが、ここではほとんどの質問のように絶対的に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：私は最終的に人々の数に応じて、複数の互いの上に重ねキャンバス、エディタを必要とするので、のZIndexがグローバルに初期化され

を接続私はここで間違って何をしているのですか？ありがとう

Answer 1

ほぼあります。コンテナの幅と高さを相対的に移動し、それを相対パスにし、エディタとキャンバスを100％幅/高さで0,0に配置します。エディターのzIndexは、キャンバスのzIndexより小さくする必要があります。 fiddle