8

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;
 }

PS: zindex はグローバルに初期化される

ここで何が間違っていますか？ありがとう

4

1 に答える 1

12

もうすぐです。コンテナーの幅と高さを移動し、相対的にします。エディターとキャンバスは、幅/高さが 100% の 0,0 に絶対配置されます。エディターのは、キャンバスのzIndexよりも低くする必要があります。フィドルzIndex

于 2013-05-11T22:43:26.703 に答える