問題上疊加上HTML5畫布

的背景兩個div能否請您看看This Demo，讓我知道爲什麼我不能夠過於股利layer2與黃色背景節電層次爲其他和Canvas？問題上疊加上HTML5畫布

這裏是我的代碼：

<div id="canvas-wrap"> 
    <canvas id="myCanvas" width="500" height="500"></canvas> 
    <div id="layer1"></div> 
    <div id="layer2"></div> 
</div> 

#canvas-wrap { 
    position:relative; 
    width:500px; 
    height:500px 
} 
#canvas-wrap canvas { 
    position:absolute; 
    top:0; 
    left:0; 
    z-index:0 
} 
#layer1 { 
    width:500px; 
    height:500px; 
    background-image: url('http://i1275.photobucket.com/albums/y443/Behseini/c1f7a913-898d-44aa-ad4a-c73a9cbc5823_zpsb0a0136c.png'); 
    background-repeat: no-repeat; 
} 
#layer2 { 
    position:relative; 
    height:100%; 
    width:100%; 
    background-color:yellow; 
}

感謝

來源

2014-05-16 Suffii

是this fiddle你想要什麼？你有一個位置和z-index的問題

#canvas-wrap { 
    position:relative; 
    width:500px; 
    height:500px 
} 
#canvas-wrap #myCanvas { 
    position:absolute; 
    top:0; 
    left:0; 
    z-index:1; 
} 
#layer1 { 
    position: relative; 
    width:500px; 
    height:500px; 
    background-image: url('http://i1275.photobucket.com/albums/y443/Behseini/c1f7a913-898d-44aa-ad4a-c73a9cbc5823_zpsb0a0136c.png'); 
    background-repeat: no-repeat; 
    z-index:10; 
} 
#layer2 { 
    top:0px; 
    position:absolute; 
    height:100%; 
    width:100%; 
    background-color:yellow; 
}

來源

2014-05-16 03:52:24

感謝克里斯這幾乎是我想要的，但我需要在每一個頂部的畫布上畫圖。正如你可以看到圖像在畫布後面 – Suffii

不確定你的意思。在我的小提琴中，您看到了雷鬼搖擺樂男人和黃色 –

前面的紅點，但是我需要在每件事物的頂部都有紅點 – Suffii

-1

這是因爲#layer1被消耗在畫布上的空間。 #layer2正在推動層，不能向上移動。

所以爲了有#layer2覆蓋，你需要設置其position:absolute;和top:0px，在這個演示：http://jsfiddle.net/8F2G8/6/

來源

2014-05-16 03:44:17 TiltedListener

你的提琴只是顯示一個黃色的方形 –

感謝TiltedListener，但Chirs說你在你的小提琴缺少第一層？ – Suffii

我誤解了你想要頂部的紅色圓圈的問題。 – TiltedListener

問題上疊加上HTML5畫布

回答

相關問題