Question

For a js slider we’re using a span “slider_link” to make the entire containing div into a clickable link. The issue is the first div seems to stay in place so the link never changes even when the slides do. We want the link for each slide to appear with that slide.

Demo of issue

HTML excerpt:

<div class="slider1">
<div class="slider-text slider-text1">
<a href="http://www.abacusnyc.com/about-us/overview"><span class="slider_link"></span></a>
<h1><span>Differentiate.</span> Shouldn't your recruitment firm stand out as much as you do.</h1>
<p>Human Resourcefulness is finding the right people, right now.</p>

</div>
</div>

CSS excerpt:

.slider_link { 
    float:left;
     position:absolute;
     width:100%;
     height:100%;
     top:0;
     left: 0;

  /* edit: added z-index */
      z-index:inherit;

  /* edit: fixes overlap error in IE7/8, 
     make sure you have an empty gif */
     background-image: url('../images/empty.gif');
}  

Answer 1

Put relative positioning in the wrapper div!