jquery elemento posizionato assoluto fare clic su

Question

Ho un problema con il posizionamento div posizionato in modo assoluto. Sto sviluppando un sito Web con jquery scrollpath e aggiunto altri livelli per ottenere l'effetto di parallasse e i copertine dei coperchi superiori nel livello principale e non possono essere cliccati, sospesi, ecc.

Here è semplice 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; 
} 
} 

ho bisogno di mantenere questa struttura html e la capacità di fare clic div div in assoluto posizionata con minore z-index. È possibile?

Answer 1

È possibile impostare pointer-events su none sull'elemento superiore per impedirne la reazione agli eventi del mouse.

pointer-events:none; 

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

supporto del browser Cross è molto buono in questi giorni: http://caniuse.com/#feat=pointer-events

Per ulteriori informazioni sul puntatore-eventi si prega di consultare la documentazione: https://developer.mozilla.org/en/docs/Web/CSS/pointer-events?v=example

Answer 2

Se non avete bisogno di tenere traccia fare clic sugli eventi nel livello superiore, quindi è possibile ottenere ciò utilizzando

pointer-events: none 

sullo strato superiore.

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

Oppure si può anche farlo funzionare inoltrando eventi click attraverso strati come pointer-events: none non è adeguatamente supportato cross browser. Date un'occhiata a questo link http://www.vinylfox.com/forwarding-mouse-events-through-layers/

Answer 3

Si potrebbe aggiungere "pointer-events: none;" al div contenente l'elemento posizionato in modo assoluto. In questo modo cliccherete sull'elemento.

Answer 4

Il modo css è buono, ma come hanno detto non è un browser corss. Ad ogni modo, puoi trovare la risposta here, su stackoverflow. Hai due modi e se fossi in te userò lo js method.

Modifica: in base a ciò che hai seguito l'esempio js e ho ottenuto 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'); 
    }); 
}); 

Answer 5

Il modo cross-browser per risolvere questo è quello di utilizzare z-index per posizionarlo sul livello sopra il genitore.