覆蓋一個畫布覆蓋div

我有一個div，我想覆蓋一個完全相同的寬度，高度，填充和邊距的頂部的畫布。儘管我使用position：絕對像這裏推薦的絕大多數問題，而z-index畫布仍然顯示在div下面。這是我到目前爲止的代碼。覆蓋一個畫布覆蓋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：Z-索引是全局初始化，因爲我需要分層在彼此頂部的多個畫布和編輯最終取決於人的數量連

我在做什麼錯在這裏？謝謝

來源

2013-05-11 Bernice

幾乎在那裏。移動容器的寬度和高度，使其相對，編輯器和畫布絕對定位在0,0，寬度/高度都爲100％。編輯器的zIndex必須低於畫布的zIndex。 fiddle

來源

2013-05-11 22:43:26

這對我有效！非常感謝！我可以像我喜歡的那樣放置儘可能多的畫布，只要我將它們分配給更高的索引吧？對於像我這樣的網絡編程的初學者來說，CSS是一件非常痛苦的事情！ – Bernice 2013-05-11 23:50:16

覆蓋一個畫布覆蓋div

回答

相關問題