CODEWITHSUNDEEP
javascriptjquerycss
Lukas Ignatavičius
Lukas Ignatavičius

Reputation: 3615

jquery absolute positioned element click

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?

Upvotes: 5

Views: 11443

Answers (5)

sanchez
sanchez

Reputation: 4530

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

Upvotes: 8

Zach B
Zach B

Reputation: 534

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

Upvotes: 1

stefanz
stefanz

Reputation: 1326

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' );
    });
});

Upvotes: 1

Prasenjit Kumar Nag
Prasenjit Kumar Nag

Reputation: 13461

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/

Upvotes: 3

jvakuiler
jvakuiler

Reputation: 528

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

Upvotes: 0

Related Questions