CODEWITHSUNDEEP
javascripthtmlcss
user689751
user689751

Reputation:

overlapping div's click

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>

Upvotes: 3

Views: 3435

Answers (1)

Matt Burland
Matt Burland

Reputation: 45135

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

Upvotes: 4

Related Questions