如何將兩個畫布置於另一個上面？

我需要在另一個頂部顯示一個HTML5畫布。這我已經通過以下方式已經管理：如何將兩個畫布置於另一個上面？

<canvas id="lower" width="900" height="550" style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas> 
<canvas id="upper" width="900" height="550" style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>

不過，我似乎無法弄清楚如何同時保持一個在另一個的頂部中心這兩個油畫。有任何想法嗎？

來源

2013-06-27 soystuff

製作的外容器與text-align:center和position:relative，使內部容器與position:relative，放畫布內部容器內，在兩個畫布除去left:0;top:0;，並在畫布的下部取出position:absolute。並確保在HTML中，較低的畫布出現在較高的畫布之前，就像您擁有的一樣。

#container { 
    text-align:center; 
    position:relative; 
} 

#inner_container{ 
    position:relative; 
} 
#upper { 
    z-index: 1; 
} 
#lower { 
    position:absolute; z-index: 0; 
}

http://jsfiddle.net/NW6Fx/

編輯：我相信如果你做這種方式是不需要的Z-index屬性。該命令只是一個問題，其中canvas首先在HTML中，它是position:relative。

來源

2013-06-27 17:09:53

你可以把它們斷裂線<br/>

或

之間可能會嘗試給他們每個人以下的css：

{ 
    margin:auto; 
    clear:both; 
}

隨着你應該使用頂部絕對定位。例如，第一個放top: 50px。這將從頂部移動第一個元素50px 遠離。對於第二個，請輸入top: 100px。

來源

2013-06-27 16:57:24 Euphe

感謝大家的幫助。出於多種原因，我最終只是使用jQuery來計算屏幕的中心。然後，我也使用它調整畫布的CSS屬性，但我離開了絕對位置。 – soystuff

把它們與一個造型的<div>內：

div#canvasContainerId { 
    position: relative; 
    margin-left: auto; 
    margin-right: auto; 
    width: 900px; 
}

的position: relative使absolute定位<canvas> ES，成爲相對於它們含有<div>。
auto利潤率，以及固定的width，中心<div>。

來源

2013-06-27 16:59:03 apsillers

如何將兩個畫布置於另一個上面？

回答

相關問題