Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 27.04.2018, 12:02
Кандидат Javascript-наук
Отправить личное сообщение для pokk Посмотреть профиль Найти все сообщения от pokk
 
Регистрация: 30.01.2014
Сообщений: 145

Не работает кнопка при 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) как этого избежать?

Последний раз редактировалось pokk, 27.04.2018 в 12:10.
Ответить с цитированием
  #2 (permalink)  
Старый 27.04.2018, 12:35
Аватар для MC-XOBAHCK
Профессор
Отправить личное сообщение для MC-XOBAHCK Посмотреть профиль Найти все сообщения от MC-XOBAHCK
 
Регистрация: 06.08.2017
Сообщений: 473

У элемента с 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>

Последний раз редактировалось MC-XOBAHCK, 27.04.2018 в 12:40.
Ответить с цитированием
  #3 (permalink)  
Старый 27.04.2018, 12:49
Кандидат Javascript-наук
Отправить личное сообщение для pokk Посмотреть профиль Найти все сообщения от pokk
 
Регистрация: 30.01.2014
Сообщений: 145

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

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

Последний раз редактировалось pokk, 27.04.2018 в 12:56.
Ответить с цитированием
  #4 (permalink)  
Старый 27.04.2018, 13:38
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,791

pokk, попробуйте z-index кнопки увеличить.
Ответить с цитированием
  #5 (permalink)  
Старый 28.04.2018, 06:58
Кандидат Javascript-наук
Отправить личное сообщение для pokk Посмотреть профиль Найти все сообщения от pokk
 
Регистрация: 30.01.2014
Сообщений: 145

Nexus, Благодарю !!!!!! заработало, только я так и не понял в чем прикол почему с position: absolute кнопки ниже по z становятся ?
Ответить с цитированием
  #6 (permalink)  
Старый 28.04.2018, 09:11
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,791

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

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

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

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Ошибки и баги на сайте Jeremen Сайт Javascript.ru 79 13.08.2021 12:47
Не работает $http.get при закрытии страницы AlexDH Angular.js 0 30.09.2015 13:12
помогите пожалуйстаюю Я ещё ноовичёк Т_т. Askanim Элементы интерфейса 5 23.08.2015 13:03
При загрузке не работает, по F5 работает trillian Events/DOM/Window 1 05.12.2014 19:37
Fancybox при клике на метку Яндекс.Карт не работает с параметрами imax57 jQuery 0 04.10.2014 09:18