CODEWITHSUNDEEP
javascriptcsshtml
Alston
Alston

Reputation: 2137

The canvas overlaps my button

Here are my code snippet: 

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

I can see one canvas overlaps another one partially. And that's what I need. But as I need to add a button above the yellow canvas (background). I just can't find the method. Even if I use relative:

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

The button is always behind the canvas. I'm a new beginner and try many methods but in vain. Please somebody help me. Thank u.

Upvotes: 0

Views: 1314

Answers (1)

bfavaretto
bfavaretto

Reputation: 71938

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

So why are you positioning the button at top: 76px, and the canvas at top: 70px? You are explicitly positioning the button under the canvas.

Change you button code to something like this:

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

Upvotes: 1

Related Questions