Question

Here is a simplified version code: The anchors on the left and right (behind the middle anchor) are not clickable. I tried using z-index to bring just the anchors in front and leave the divider in the back so that the middle anchor would still also be clickable… I think the best way to understand my problem would be to just make a quick example.html file and copy paste it in and try to click all 3 anchors (the middle anchor has line breaks so it looks like a lot of anchors but it’s actually only 1)

JSFiddle link to code: http://jsfiddle.net/a9C3R/1/

Anyways, here is the code:

<div style='position:fixed; top:0%; left:0%; height:100%; width:100%;'>
<div style='width:850px; margin-left:auto; margin-right:auto; border-left-style:solid; border-left-color:#333; border-left-width:thin; border-right-style:solid; border-right-color:#333; border-right-width:thin;padding-left:20px; padding-right:20px; padding-top:60px; padding-bottom:60px; height:100%; overflow:visible; background-color:#FFF;'>
<div>
<table width='100%' height='100%' style='width:100%; height:100%;'>
<td height='50%' width='120px' style='vertical-align:middle; height:50%; width:120px;'>
<div><a href=''>try to click me</a></div>
</td>
<td width='90%' style='vertical-align:middle; width:90%;'></td>
<td height='50%' width='120px' style='vertical-align:middle; height:50%; width:120px;'>
<div><a href=''>try to click me</a></div>
</td>
</table>
</div>
</div>
</div>

<div style='position:absolute; top:0%; left:0%; height:100%; width:100%;'>
<div style='width:610px; margin-left:auto; margin-right:auto; padding-left:20px; padding-right:20px; padding-top:60px; padding-bottom:60px; height:100%; overflow:visible;'>
<center>
<a href=''><font size="+1">try<br>to<br>click<br>me<br><br><br><br><br>try<br>to<br>click<br>me<br><br><br><br><br>try<br>to<br>click<br>me<br><br><br><br><br>try<br>to<br>click<br>me<br><br><br><br><br>try<br>to<br>click<br>me<br><br><br><br><br>try<br>to<br>click<br>me<br><br><br><br><br>try<br>to<br>click<br>me<br><br><br><br><br></font></a>
</center>
</div>
</div>

Answer 1

Please check the code here:
http://jsfiddle.net/a9C3R/2/
I have added z-index: 1;position: relative; to the second div and style="position: relative;z-index: 1;" for anchor which is coming after <center> tag.