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?

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?

• javascript
• jquery
• css

5 Answers 5

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

If you dont need to track click events in the upper layer then you can achieve this using

pointer-events: none

on the upper layer.

Working Fiddle: http://jsfiddle.net/joycse06/ugGgN/6/

Or you can also make it work by forwarding click events through layers as pointer-events: none is not properly supported cross browser. Have a look at this link http://www.vinylfox.com/forwarding-mouse-events-through-layers/

The css way is good one, but as they said is no corss browser. Anyway, you can find answer here, on stackoverflow. You have two ways and if i were you i would use the js method .

Edit : according to what you have i followed the js example and i got this.

$('.a').on( 'click', function( event ){
    var clickPos = [event.pageX, event.pageY];
    $('.element').each(function(){
        var t = $(this),
            elemPos = [t.offset().left, t.offset().top],
            elemSize = [t.width(), t.height()];

        if (
            clickPos[0] > elemPos[0] && clickPos[0] < elemPos[0] + elemSize[0]
            && clickPos[1] > elemPos[1] && clickPos[1] < elemPos[1] + elemSize[1]
        ) t.trigger( 'click' );
    });
});

The cross-browser way to solve this is to use z-index to position it on the layer above the parent.

You could add "pointer-events:none;" to the containing div of the absolutely positioned element. That way you will click trough the element.