Абсолютно позиционируется div над выбираемым текстом / ссылками - PullRequest
Новая
       8

Абсолютно позиционируется div над выбираемым текстом / ссылками

4 голосов
/ 19 января 2011

У меня есть div, который расположен на большой части страницы, поэтому содержимое под div больше не может быть выбираемым / активируемым.

Есть ли способ исправить это?то есть: сделать так, чтобы div не имел никакой интерактивной функции? 

#page {
    width: 980px;
    padding: 0px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    position: relative;
}
#overlay {
    margin: 0px;
    padding: 0px;
    height: 536px;
    width: 422px;
    position: absolute;
    top: -4px;
    right: -20px;
    background-image: url(../images/overlay_full.png);
    background-repeat: no-repeat;
    background-position: left top;
}

Ответы [ 4 ]

14 голосов
/ 15 апреля 2012

использовать атрибут css "pointer-events" на оверлее: 

#overlay {
   pointer-events: none;
}

см .: HTML-оверлей, позволяющий кликам переходить к элементам позади него

1 голос
/ 19 января 2011

Если вы действительно хотите, чтобы div перекрывал (кликабельный) материал, приведенный ниже, достойного пути не существует.Неприличным способом может быть скрытие элемента в mousedown и повторное его отображение на mmupup: 

document.body.addEventListener("mousedown", function() { getElementById("overlay").style = "display:none;" });
document.body.addEventListener("mouseup", function() { getElementById("overlay").style = "display:block;" });

Однако следует помнить, что это вызывает перекомпоновку при каждом mousedown, поэтому производительность снижается.

0 голосов
/ 16 июля 2011

Существовал / был чит-метод для этого, когда вы помещали оверлей в div контейнера, устанавливая: 

position:fixed;
overflow:display;
width:0px;
height:0px;

, что впоследствии приводит к тому, что у него нет области попадания, но он все равно будет виден.Однако я не знаю, является ли это кросс-браузерным и может быть результатом ошибки.

0 голосов
/ 19 января 2011

Вы можете использовать свойство css z-index, чтобы кликабельные объекты перекрывали эту маску.Посмотрите, как это работает здесь:

http://www.w3schools.com/css/pr_pos_z-index.asp

...