Холст перекрывает мою кнопку

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>

Я вижу, как один холст частично перекрывает другой. И это то, что мне нужно. Но так как мне нужно добавить кнопку над желтым холстом (фон). Я просто не могу найти метод. Даже если я использую относительный:

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

Кнопка всегда находится за холстом. Я новичок и пробую много методов, но тщетно. Пожалуйста, кто-нибудь, помогите мне. Спасибо.

Answer 1

Но [...] мне нужно добавить кнопку над желтым холстом (фон)

Так почему же вы позиционируете кнопку на top: 76px, а холст на top: 70px? Вы явно размещаете кнопку под холстом.

Измените код кнопки на что-то вроде этого:

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