Javascript-форум - Не работает кнопка при position: absolute

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Не работает кнопка при position: absolute (https://javascript.ru/forum/misc/73593-ne-rabotaet-knopka-pri-position-absolute.html)

Не работает кнопка при position: absolute

Добрый день надо сместить div кнопок относительно другого div сделал так

.Power_Button{
	top: 130px;
	left: 613px;
	position:absolute;
	height:27px;
	width:154px;
}

<div class="Power_Button">
<input id="id_power_up_10"	name="N_power_up_10" type="button" value="+10">
<input id="id_power_up_1"	name="N_power_up_1"  type="button" value="+1">
<input id="id_power_dw_10"	name="N_power_up_1"  type="button" value="-10">
<input id="id_power_dw_1"	name="N_power_dw_1"  type="button" value="-1">			
</div>

Обработчики нажатия кнопок добавил через JS

"id_power_up_10": {
			Type:	'click',
			action: function(element, data, index){utils.Power('UP_10')}
	},
	"id_power_up_1": {
			Type:	'click',
			action: function(element, data, index){utils.Power('UP_1')}
	},

position надо absolute, так как блок кнопок совмещаю с картинкой и если поставить relative, то перед картинкой остается отступ(кстати при relative кнопки работают )

1) Почему при position:absolute; кнопки не работают
2) как этого избежать?

У элемента с position: absolute должен быть родитель с position: relative.
Возможно в этом причина.

Что если так изменить HTML:

<div style="position: relative">
<div class="Power_Button">
<input id="id_power_up_10"   name="N_power_up_10" type="button" value="+10">
<input id="id_power_up_1"    name="N_power_up_1"  type="button" value="+1">
<input id="id_power_dw_10"   name="N_power_up_1"  type="button" value="-10">
<input id="id_power_dw_1"    name="N_power_dw_1"  type="button" value="-1">          
</div>
</div>

Родитель есть и если ешё один добавить то все равно все так же,
кнопки смешаются как надо. Может область нажатия не смещаеться?
Сейчас крутил relative все тоже самое тоже кнопки не кликабельны становятся после того как подкрутить top, left в стилях.

Или когда через JS, устанавливаю событие clik, сильно рано, типа установил когда div располагался до смешения, а после он сместился.

pokk, попробуйте z-index кнопки увеличить.

Nexus, Благодарю !!!!!! заработало, только я так и не понял в чем прикол почему с position: absolute кнопки ниже по z становятся ?

pokk, у вас просто какой-то элемент (видимо невидимый) перекрывал вашу кнопку.

Цитата:

Сообщение от htmlacademy.ru/

Если в одном месте страницы оказываются несколько «абсолютных» блоков, то они перекрывают друг друга. По умолчанию выше оказывается тот блок, который расположен дальше в коде страницы.

C помощью CSS-свойства z-index можно управлять тем, как перекрываются блоки. Значением этого свойства может быть целое число. Чем больше z-index, тем выше располагается блок.

Cвойство z-index работает для элементов, у которых position задано как absolute, fixed и relative. Таким образом, «относительный» элемент может перекрывать «абсолютный».
source