jquery absolute positioned element click

Question

I have a problem with absolute positioned div's click. I am developing a website with jquery scrollpath and added extra layers to get parallax effect and top layer covers buttons in main layer and they cant be clicked, hovered, ect.

Here is simple examlple:

<div class="body">
<div class="a"></div>
<div class="b">
    <div class="element first">First</div>
    <div class="element second">Second</div>
</div>
</div>

.body {
    position relative;
}
.a {
    position: absolute;
    left: 20px;
    top: 20px;
    width: 300px;
    height: 600px;
    background: rgba(0,0,0,0.5);
    z-index: 2;
}
.b {
    position: absolute;
    left: 40px;
    top: 40px;
    width: 260px;
    height: 300px;
    background: blue;
    z-index: 1;
}
.b .element {
    position: absolute;
    width: 50px;
    height: 50px;
    background: red;
}
.b .element.first {
    top: 50px;
    left: 50px;
}
.b .element.second {
    bottom: 50px;
    right: 50px;
}
}

I need to keep this html structure and ability to click div's in absolute positioned div with lower z-index. Is it possible?

Answer 1

You can set pointer-events to none on the upper element to stop it reacting on mouse events.

pointer-events:none;

JSFIDDLE http://jsfiddle.net/ugGgN/5/

Cross browser support is very good these days: http://caniuse.com/#feat=pointer-events

For more information on pointer-events please see the documentation: https://developer.mozilla.org/en/docs/Web/CSS/pointer-events?v=example