Вопрос:
Привет, у меня есть веб-сайт, который я делаю. У меня есть текст и кнопки на фоне, который раньше работал, прежде чем фон был добавлен. Но теперь они больше не работают. Они тянутся к экрану, но не работают. Посмотрите на этот код в течение минуты:
<div id = «rect0»> <div class = «banner grid_18″ href=»about.html»> </div> <a href=»logic.html» class=»button» id =»new»>View Article</a> <div class=» grid_8 callout»> </div> <a href=»gallery.html» class=»button» id =»new1″>View Gallery</a> </div>
Когда кнопки находятся вне div rect0, они функционируют, но когда они находятся внутри, они не доступны для клика. Здесь css encase, который осуществляет его.
#rect0{ position: relative; margin-top: -10px; margin-left: 0px; width: 951px; height: 270px; padding-left: 4px; padding-top: 1px; background: #ffffff; z-index: -1; } .button{ background: #242324; color: #B7B7B7; padding: 6px; color: white; font-size: 11px; text-transform: uppercase; } .button:hover{color: #d2d2d2;} #new{ position: absolute; margin-left: -140px; margin-top: 220px; } #new1{ position: absolute; margin-left: 117px; margin-top: 220px; }
Что я делаю неправильно, что не позволяет активировать кнопки? Спасибо, Джек.
Лучший ответ:
Удаление z-index: -1 заставляет его работать. См. Этот скрипт в качестве ссылки.
Поскольку ваши кнопки находятся внутри div вы применяете z-index: -1; к тому же все они попадают в задний план, и поэтому они отключены.
Ответ №1
Вы устанавливаете отрицательный z-index который перемещает div позади основного слоя. На следующих рисунках показано, как работает z-индекс. Все на странице, например, ваше тело по умолчанию имеет z-index: 0, путем установки z-index: -1 вы перемещаете/отрисовки div позади body
Ответ №2
Отрицательный z-index на #rect0 толкает контейнер div “позади” его родителя. Попробуйте изменить его на 0 или 1
