javascript - Canvas 与我的按钮重叠

Question

这是我的代码片段:

<canvas id ="compound_area"  style= "position: absolute; border: 2px hidden; top:70px; left: 10px; background-color : #FFFF99"  width = "1230"  height= "580"></canvas> 

<canvas id ="drawing_plate"  style= "position: absolute; border: 2px hidden; top:93px; left: 230px; background-color : #FFFFFF" width = "1000" height= "550">

<button id= "pencil" style= "position: absolute; top: 76px; left: 17px"> PENCIL </button>

我可以看到一张 Canvas 与另一张 Canvas 部分重叠。这就是我需要的。但是因为我需要在黄色 Canvas (背景)上方添加一个按钮。我只是找不到方法。即使我使用亲戚:

<div style="position: relative;">
<canvas id ="compound_area"  style= "position: absolute; z-index= 0; border: 2px hidden; margin-top:70px; margin-left: 10px; margin-right : 10px; margin-bottom : 10px; background-color : #FFFF99 "   width = "1230"  height = "580"></canvas> 

<canvas id ="drawing_plate"  style= "position: absolute; z-index= 1; border: 2px hidden; margin-top:93px; margin-left: 230px; margin-bottom : 20px; background-color : #FFFFFF" width = "1000" height= "550"></canvas>

<button id= "pencil" style= "position: absolute; z-index= 2; top: 76px; left: 17px"> PENCIL </button>
</div>

按钮总是在 Canvas 后面。我是一个新手，尝试了很多方法但都是徒劳的。请有人帮助我。谢谢你。

Answer 1

But [...] I need to add a button above the yellow canvas (background)

那么为什么要将按钮定位在 top: 76px，而将 Canvas 定位在 top: 70px？您明确地将按钮定位在 Canvas 下方。

将按钮代码更改为如下内容:

<button id= "pencil" style= "position: absolute; top: 50px; left: 17px"> PENCIL </button>