我有一个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是全局初始化的,因为我需要多个画布相互叠加,编辑器最终取决于连接的人数
我在这做错了什么？谢谢
解决方法
差不多了.移动容器上的宽度和高度,使其相对,编辑器和画布绝对定位在0,宽度/高度为100％.编辑器的zIndex必须低于画布的zIndex.
fiddle