キャンバスはここに私のボタン

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> 

私は1枚のキャンバスが部分的に別のものと重なって見ることができます。それが私の必要なものです。 しかし、黄色のキャンバス（背景）の上にボタンを追加する必要があります。私は方法を見つけることができません。たとえ相対使用しても：

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