画布重叠我的按钮

这里是我的代码片段：画布重叠我的按钮

<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>

我可以看到一个帆布部分重叠另一个。这就是我需要的。但是，因为我需要在黄色画布上添加一个按钮（背景）。我只是找不到方法。即使我使用相对：

<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>

该按钮始终在画布后面。我是一个新手，尝试很多方法，但徒劳无功。请有人帮助我。谢谢你。

来源

2012-03-19 Stallman

真的取决于你想要什么。可能今天我太累了，但我不知道你到底在说什么。 – 2012-03-19 18:53:07

该按钮不能位于黄色画布上方，只有黄色画布与其重叠。了解？ – Stallman 2012-03-19 19:09:17

您是否试过'z-index：2;'而不是'z-index = 2;'？（CSS语法是'property：value'，而不是'property = value'） – Zeta 2012-03-19 19:11:04

但是......我需要添加黄色帆布上面的按钮（背景）

，那你为什么在top: 76px定位按钮，并在top: 70px画布？您明确地将该按钮定位在画布下。

更改您按钮的代码是这样的：

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

来源

2012-03-19 19:09:54 bfavaretto

OP基于z-based（'z-index'）还是y-based定位（'top'）。我*猜测*他故意使用规则'top：76px'，并且需要基于图层的帮助。他应该真的澄清这个问题：/。 – Zeta 2012-03-19 19:18:22

画布重叠我的按钮

回答

相关问题