画布与我的按钮重叠

The canvas overlaps my button

本文关键字：按钮 重叠 我的      更新时间：2023-09-26

以下是我的代码片段：

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

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

但是[…]我需要在黄色画布（背景）上方添加一个按钮

那么，为什么要将按钮定位在top: 76px，将画布定位在top: 70px呢？您将按钮明确地放置在画布下。

将你的按钮代码更改为这样的代码：

<button id= "pencil" style= "position: absolute; top: 50px; left: 17px"> PENCIL </button>
相关文章：