Div над интерактивной ссылкой

Div над интерактивной ссылкой

Я хочу создать блок над другим блоком, который содержит ссылку. Проблема в том, что первый div препятствует доступу по ссылке. Можно сделать присутствующим, но доступным?

(Я не хочу делать рамку вокруг div или что-то в этом роде, я действительно хочу, чтобы div был выше другого div)

ДЕМО В FIDDLE

HTML:

 <div class="top">
<a href="#">LINK</a>
</div>
<div class="bottom"></div>
  

CSS:

 .top { 
height:100px;
width:200px;
position:fixed;
top:10px;
background:yellow; }

.bottom { 
height:50px;
position:fixed;
top:10px;
width:100px;
border:3px solid red; }
  
Показать лучший ответ

Вы имеете в виду настоящее, но недоступное?

Почему вы сделали фиксированное положение?

Итак, почему вы помещаете элемент поверх элемента, по которому пользователь должен щелкнуть?

Для этого есть несколько веских причин, по которым существуют события-указатели. Я не собираюсь подвергать сомнению его доводы.

Назовите одну вескую причину, по которой это невозможно сделать другим способом.

Div, содержащий фоновое изображение, которое вы хотите наложить поверх чего-либо. Прозрачность фонового изображения, которое накладывается поверх «чего-то», предотвращает событие щелчка. Указатели-события не позволят прозрачности скрыть элемент от события щелчка. Кроме того ... почти все можно сделать несколькими способами.

Это плохой пример, зачем вам помещать частично прозрачное изображение поверх чего-то другого, и если вы это сделали, почему бы вместо этого не прикрепить событие щелчка к частично прозрачному элементу, работает везде и так же просто. В 99,99% случаев, когда вам действительно нужно использовать события-указатели, вы потерпели неудачу ни в дизайне, ни в поведении, ни в разработке правильного поведения.

Хорошо ... Ну, я не приезжаю на ТАК, чтобы пытаться доказать, что кто-то неправ, или начинать споры только ради этого. Если ты так сильно этого хочешь, то все твое, приятель. :)

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

Покажите мне, где я утверждал или даже отдаленно намекнул, что события-указатели были законом святого Грааля. Не живи, человек. Я пришел сюда, чтобы помочь кому-то, у кого возник вопрос. Если мой ответ вас не удовлетворил, я прошу прощения, но обещаю, что это не конец света.

Я считаю, что вы ищете pointer-events:none; в CSS файла .bottom

Попробуйте это:

 .bottom { 
    height:50px;
    position:fixed;
    top:10px;
    width:100px;
    border:3px solid red;
    pointer-events:none;
}
  

http://jsfiddle.net/wrxsti85/aYV4J/

Надеюсь, это поможет!

Изменить: добавлена ​​скрипка

+1 для использования событий-указателей: нет Примечание: только IE 11+ поддерживает события-указатели

Что ж, указатели-события - не лучшее решение, так как это не кроссбраузерно ... См. Таблицу совместимости: caniuse .com / # feat = указатель-события

Хорошая информация Akaryatrh. Я обязательно буду иметь это в виду в будущем.

Большое спасибо! Просто проблема в том, что если я хочу применить jquery-анимацию к «нижнему» div, это не сработает. jsfiddle.net/aYV4J/2

Это было бы правильно. Если вы пытаетесь оживить, это не решение для вас. Добавляя pointer-events: none, вы делаете так, чтобы прослушиватель событий для .bottom больше не запускался по событиям указателя.

Используйте z-index , чтобы разместить один над другим:

 .top {
    height:100px;
    width:200px;
    position:fixed;
    top:10px;
    z-index:1;
    background:yellow;
}
.bottom {
    height:50px;
    position:fixed;
    top:10px;
    width:100px;
    border:3px solid red;
    z-index:0;
}
  

поддерживается равновесие !! :)

вы можете сделать это таким образом

 .top a{
    position:relative;
    z-index:2;
}
  

и в .bottom div с упоминанием

 .bottom { 
    z-index:1;
}
  

обновленный файл jsFiddle

использовать z-index

демонстрация

 .top {
    height:100px;
    width:200px;
    position:fixed;
    top:10px;
    background:yellow;
    z-index:99999;
}
.bottom {
    height:50px;
    position:fixed;
    top:10px;
    width:100px;
    border:3px solid red;
}
  

Попробуйте это, он помещает Div друг на друга:

 .top { 
    height:100px;
    width:200px;
    top:10px;
    background:yellow;
    display:block;}

.bottom { 
    height:50px;
    top:10px;
    width:100px;
    border:3px solid red;
    display:block;}
  

Не понимаю, почему вы сделали именно так.

Z-index можно использовать для размещения одного блока над другим, однако есть более эффективные способы сделать то, что вы хотите.

См. эту Fiddle

HTML

 <div class="bottom">
<a href="#">LINK</a>
</div>
  

css

  .bottom {height:auto;width:100px;border:3px solid red;background:yellow; }
 .bottom a {display:block;margin:0 auto;background:yellow;padding:20px;text-align:center;}
  

Просто добавьте с вашим текущим CSS:

 .bottom{
    ....

    pointer-events:none;
}
  

В противном случае вы можете добавить / увеличить значение z-Index для класса .top, только если в вашем случае нет ограничений z-Index.

Я не понимаю, почему вы, ребята, используете здесь position:fixed . Если вам не нужны границы и вы хотите, чтобы все было просто, используйте:

 .top { 
    height:100px;
    width:200px;
    background:yellow; 
    position:relative;
}

.bottom { 
    height:50px;
    position:absolute;
    top:10px;
    width:100px;
    border:3px solid red; 
    z-index:-1;
  }
  

Ссылка на скрипт http://jsfiddle.net/wVLa8/24/

Проверьте эту скрипку . Возможно, удерживая правое ухо левой рукой, но это единственное решение (без проблем с поддержкой браузера) для создания невидимых зеркальных объектов перед объектом, что делает объекты позади них недоступными и позволяет им передавать события исходным объектам ...

 $(function () {

    $.each($('.back').children(), function () {

        var $behindObject = $(this),
            $behindObjectOffset = $behindObject.position();

        $('<div class="invisible-mirrors">')
            .css({
                width: $behindObject.width(),
                height: $behindObject.height(),
                top: $behindObjectOffset.top,
                left: $behindObjectOffset.left
            })
            .on('click', function () {
                $behindObject.trigger("click");
            })
            .appendTo('.fore')
    });


    //test of click event

    $('.back a').on('click', function () {
        $(this).text($(this).text() + ' got the event : click')
    })


})
  

Черт возьми, в этом нет необходимости. Не используйте Z-INDEX и не используйте POINTER-EVENTS.

Сначала посмотрите на эту скрипку

Просто переставьте HTML-код и правильно назовите селекторы CSS:

HTML:

 <div class="bottom">
    <div class="top"> <a href="#">LINK</a>
    </div>
</div>
  

Элементы, которые считаются "НИЖЕ" или "ПЕРЕД" другими элементами, появляются в HTML первыми.

CSS:

 .bottom {
    height:100px;
    width:200px;
    position:fixed;
    top:10px;
    background:yellow;
}
.top {
    height:50px;
    position:absolute;
    width:100px;
    border:3px solid red;
}
  

Вам также не нужны оба position: fixed; . Только контейнер. Это также означает, что они не должны быть то одним, то другим. Если они вам действительно нужны, вы можете оставить их неизменными, как и раньше, и изменить HTML, но я бы не советовал этого делать.