Question

I cannot get this link to be clickable for the life of me. When I take it outside of the ‘lb’ div it functions. I’ve applied z-index values and it doesn’t change anything. I’m about to rip my hair out. Some help, please.

<div id="lb">         
  <div id="cntct">  
        <div id="map">
        <a href="http://goo.gl/maps/aoYyJ" style="position:relative; left:-5px; top:25px; z-index:250;">This is a link</a>

        </div>                 
  </div>
</div>

CSS

#lb 
{
    position:relative;
    top:-50px;
    z-index:-20;
    background-image:url(../src/images/Lbkg.jpg);
    background-repeat:no-repeat;
    height:650px;
    overflow:auto;
}

#cntct 
{
    position:relative;
    top:70px;
    background-image: url(../src/images/cntct.png);
    background-repeat:no-repeat;
    background-position:center;
    height:400px;
    width:1000px;
    margin:auto;
    z-index:-10;
}   

#map 
{
    position:relative;
    top:45px;
    left:50px;
    width:600px;
    height:400;
    z-index:5;
}

Answer 1

try taking the top style off it – hard to tell with only the code you have posted, but it may be pushing it out of the div, meaning that something else (that is transparent) is overlaying it, and intercepting the click.

If you’re using firefox/chrome/etc, you can try to right-click on the link, and inspect element (or similar command) – should open the DOM browser with the element you clicked on selected. If the link isn’t selected in the DOM (ie some other element is selected) then that element is on top of the link, intercepting clicks…