[英]click through overlay div to canvas with delegating click event over coordinates
[英]Overlay a canvas over a div
我有一個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,0,寬度/高度為100%。 編輯器的zIndex
必須低於畫布的zIndex
。 小提琴
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.