I'm struggling to overlay a canvas on top of a div with the same dimensions, padding, and margins. Despite using position: absolute and z-index as suggested in similar questions, the canvas keeps appearing underneath the div. Here's my current code:
<div id ="editor-section">
<div class="editable" id="editor"></div>
</div>
// dynamically create/remove canvas upon connection/disconnection
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: I've declared zindex globally due to the need for multiple layered canvases depending on connected users.
Any insights on what might be causing this issue? Appreciate any help. Thanks!