在html 5中，如何將div元素放置在canvas元素的頂部？

任何人都可以幫助我：我試圖在html中放置一個div元素（比如說，10px x 10px）在canvas元素的頂部（前面）（比如說500px x 500px）。我試圖改變每個Z指數，無濟於事。有沒有人有任何想法，或者這是你不能真正做的事情之一？我已經知道如何做絕對定位和一切，div元素只是掛在畫布元素後面的背景中。我需要一種方法將它放在前面，將畫布元素放到後面。在html 5中，如何將div元素放置在canvas元素的頂部？

謝謝！

來源

2010-04-20 Unraised

-7

XHTML

<div id="canvas"> 
    <div id="topelement"> 
    </div> 
</div>

CSS樣式

#canvas { height: 500px; width: 500px; overflow: hidden; } 
#topelement { height: 10px; width: 10px; float: left; }

來源

2010-04-20 00:20:33

您完全誤解了關於'

這取決於您的元素。

要使用z-index，您必須將位置設置爲相對或絕對位置。

來源

2010-04-20 00:24:26 Emmanuel

我似乎沒有同樣的問題。我創建了一個樣本畫布/ div，就像你在JSbin所說的那樣：http://jsbin.com/adowo/edit

這就是你要找的東西？或者我錯過了什麼？

來源

2010-04-20 01:15:01 RussellUresti

可能是瀏覽器問題？如果OP指定了他們正在使用的內容，它可能會有幫助... – 2010-04-20 01:38:04

我嘗試了Firefox和Chrome瀏覽器......我不認爲IE支持畫布，所以我不認爲他們正在嘗試，但是，更多信息會有所幫助。 – RussellUresti 2010-04-20 01:51:39

絕對定位的工作方式是，通常情況下，代碼中較早的元素位於代碼後面的元素之後。要改變你確實使用z-index。但請注意，z-index僅適用於定位的元素。

另一件可能會讓你絆倒的事是全部定位元素的行爲就像z-index「容器」一樣。因此，如果您的<div>碰巧早於文檔和另一個定位的容器中，則它可能會綁定到其祖先的z-index層，因此不能在<canvas>之上轉義並顯示。如果是這種情況，您可能需要稍微重寫CSS或重新整理頁面，以便<div>處於良好狀態。

來源

2010-04-27 17:33:42 Xanthir

與OP相同的問題：「但請注意，z-index僅適用於定位的元素。」是我所需要的。謝謝@Xanthir – Morvael 2016-06-05 16:33:01

有時這可能會發生在我的經驗。我不知道html5畫布API中發生了什麼。如果你想在div元素下繪製一些圖，可以使用img標籤，下面列出。

---此示例代碼被寫入用的prototype.js（1.6）---

< -javascript-代碼 - >

var canvas = $('canvas'); 
canvas.width = 200; 
canvas.height = 200; 
var ctx = canvas.getContext('2d'); 
ctx.beginPath(); 
ctx.arc(100, 100, 100, 0, - 360 * Math.PI/180, true); 
ctx.fillStyle = 'rgba(204, 204, 255, 1)'; 
ctx.strokeStyle = 'rgba(0, 51, 153, 1)'; 
ctx.fill(); 
ctx.stroke(); 
var imgStr = canvas.toDataURL(); 
var element = new Element('img', {'src' : imgStr); 
var target = $('layer1'); 
target.insert(element);

< - HTML - >

<div id='layer2' style='z-index : 50;'>&nbsp;</div> 
<canvas id='canvas' style='z-index : 30;'></canvas> 
<div id='layer1' style='z-index : 10;'></div>

順便說一句，我的主頁是用日語寫的。

來源

2010-11-24 13:09:43

我用這個小小的一陣子，終於在將背景中想要的東西的z-index設置爲-1（而不是某個正數）之後，它纔開始工作。

來源

2011-01-14 17:19:41 galactikuh

在html 5中，如何將div元素放置在canvas元素的頂部？

回答

相關問題