div 위로 캔버스를 오버레이합니다

Question

div가 있고 동일한 너비, 높이, 채우기 및 여백으로 캔버스 위에 정확히 캔버스를 오버레이합니다. 비록 내가 position : absolute를 사용하고 있지만 여기에있는 대부분의 질문처럼 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; 
} 

추신 : 내가 잘못 여기서 뭐하는 거지 여러 캔버스가 서로의 상부에 적층하고 편집기 결국 사람들의 수에 따라

연결해야하기 때문에 전 세계적으로 Z- 색인을 초기화? 감사합니다

Answer 1

거의 다 있습니다. 컨테이너의 너비와 높이를 이동하고, 상대적으로 만들고, 편집기와 캔바스는 100 % 너비/높이의 0,0에 절대적으로 배치됩니다. 편집기의 zIndex은 캔버스의 zIndex보다 낮아야합니다. fiddle