2012-03-19 3 views
0

Вот мой фрагмент кода:Полотно перекрывается моя кнопка

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

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

+2

Зависит действительно от того, что вы хотите. Может быть, я слишком устал сегодня, но я понятия не имею, что, черт возьми, вы говорите. –

+0

Кнопка не может находиться над желтым холстом, только желтое полотно перекрывает ее. Понял? – Stallman

+2

Вы пробовали 'z-index: 2;' вместо 'z-index = 2;'? (Синтаксис CSS - это свойство: value, а не 'property = value') – Zeta

ответ

1

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

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

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

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

Неясно, хочет ли OP кнопка выше в терминах z-based (' z-index') или y-based positioning ('top') , Я предполагаю, что он использовал правило 'top: 76px' специально и нуждается в помощи на основе слоев. Он должен действительно разъяснить эту проблему: /. – Zeta

Смежные вопросы