3

how can we click the link behind the overlapping div.

css is 

#apDiv1 {
position: absolute;
left: 38px;
top: 28px;
width: 221px;
height: 182px;
z-index: 1;
text-align:right;
}
#apDiv2 {
position: absolute;
left: 117px;
top: 13px;
width: 169px;
height: 210px;
z-index: 2;
}

and the html is

<div id="apDiv1"><a href="javascript:alert('link1');">Link 1</a></div>
<div id="apDiv2">
  <p>&nbsp;</p>
<p><a href="javascript:alert('link 2');">Link 2</a></p>
</div>
Mr. Alien
  • 153,751
  • 34
  • 298
  • 278
  • So you want to be able to click `Link 1`, right? Here's a [fiddle](http://jsfiddle.net/hj9UL/). – Matt Burland Feb 11 '13 at 21:55
  • possible duplicate of [Passing mouse clicks through an overlaying element
    ](http://stackoverflow.com/questions/1737480/passing-mouse-clicks-through-an-overlaying-element-div)
     – j08691 Feb 11 '13 at 21:56
  • See http://stackoverflow.com/questions/3680429/click-through-a-div-to-underlying-elements which suggests adding `pointer-events:none;`, however, this makes `Link 2` unclickable, which I'm assuming you didn't want! – Matt Burland Feb 11 '13 at 21:56
  • @MattBurland - I can't click link 1 in your fiddle. – j08691 Feb 11 '13 at 21:58
  • Thanks Matt, I noticed you added opacity, but still unable to click Link1 –  Feb 11 '13 at 21:58
  • @iPhoneDeveloper: Yeah, sorry I wasn't suggesting it was a solution, just creating a fiddle so we can all see the problem. I added the color and the opacity so you can see where the overlap is. – Matt Burland Feb 11 '13 at 21:59
  • Thanks Matt for the fiddle, somebody suggested it's already answered, it's using some javascript to find position of the node, I want a simpler solution that will let the mouse events pass through the upper div. –  Feb 11 '13 at 22:02

1 Answers1

4

Try this:

Add pointer-events:none; to the upper div (apDiv2) and then:

#apDiv2 a {
    pointer-events:auto;
}

To re-enable it for the link in your upper div.

Seems to work in FF at least.

Updated fiddle

Matt Burland
  • 44,552
  • 18
  • 99
  • 171