Нажмите на позиционированный div с z-index, чтобы отправить кнопку внизу - PullRequest
Новая
       31

Нажмите на позиционированный div с z-index, чтобы отправить кнопку внизу

3 голосов
/ 26 апреля 2011

у меня есть: 

<div style="bottom:0; left:0; right:0; position:fixed; z-index:50; display:inline-block;">
    <div style="margin:auto; width:500px; background-color:#90C553; -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px; border:1px solid #CCC; text-align:center;">
        <h3 style="font-size:17px; color:#0072A7; padding:10px 15px;">example</h3>
    </div>
</div>

и если что-то находится на том же уровне, что и этот div, то div переполняет его.

Есть ли способ решить эту проблему без изменения всей структуры проекта?

UPDATE

Пространство для внешнего div растягивается из стороны в сторону 100%. Так как он имеет свойство z-index, он переполняет все, что ниже. Так что, если у меня есть кнопка, например, которая во время прокрутки будет ниже этого div, она не будет толкаемой.

1 Ответ

7 голосов
/ 26 апреля 2011

Я сделал демо , которое, я думаю, показывает проблему и решение. Возможно, вам придется изменить размер раздела HTML, чтобы кнопка <submit> находилась под «примером» <div> с зеленым фоном.

Решением, которое я использовал, является свойство CSS3-UI pointer-events. Есть один недостаток в том, что он не поддерживается в IE или Opera. Согласно документации Mozilla работает в Firefox 3.6+, Safari 3+, Chrome 4+.

Я проверил это в Chrome12 и Firefox4, и я могу нажать на кнопку <submit> под <div>

Редактировать: Ну, вы можете либо изменить дизайн сайта, либо полностью скрыть <div> для IE / Opera. Однако, если вы можете использовать JavaScript (который, я думаю, должен быть, поскольку position:fixed не работает в IE без него), есть несколько вариантов, о которых я могу подумать:

  1. Исчезать / исчезать в <div>, когда мышь находится над ним
  2. Получите координаты мыши и найдите <input> внизу, а затем программно нажмите кнопку (см. http://www.vinylfox.com/forwarding-mouse-events-through-layers/)

Редактировать 2: Обновлена ​​демоверсия для работы с IE. Это решение требует jQuery, но, вероятно, это можно сделать без библиотеки. Вам нужно будет поиграть с CSS position, чтобы получить <input> под позицией <div>.

Примечание: Это было рассмотрено ранее Кликните через div с альфа-каналом и Кликните через DIV для базовых элементов

...