Question

Edit: I figured this out. jQuery Cycle plugin adds a z-index to every item it works through, thus the first item always had the highest z-index, messing up all the links. Removing the z-index functionality from the plugin has fixed it.

Hi there,

I’m currently building a cycling div using jQuery cycle that has a few inside links. Basically, we have a large banner and then within that large banner I have some absolute positioned div’s containing a product, thumbnail to a video, etc. I also have custom paging.

All this works wonderfully, almost. My problem right now is that when the it rotates to the second div, the link in the same position from the first one takes precedence and overlaps the second div’s link, therefore rendering it useless for any user interactivity.

Here’s the basics of my code to better lay it out. I’ve also outlined my position placements as in response to the answer below.

    #rotation {
         position: relative;
    }

     .rotation_item {
         position: relative;
     }

     .rotation_box {
         position: relative;
     }

<div id="rotation">
<div id="rotation_container">
      <div class="rotation_item" style="background: url('/some/background.jpg');">
             <div class="rotation_box">
                <img src='/image/for/product.jpg' />
                <h3><a href='/product/page/'>Some Cool Product!</a></h3>
             </div>
      </div> 
      <div class="rotation_item" style="background: url('/some/other/background.jpg');">
             <div class="rotation_box">
                <img src='/image/for/other/product.jpg' />
                <h3><a href='/product/page_other/'>Some Other Cool Product!</a></h3>
             </div>
      </div> 
</div>
</div>

In this scenario, the only link that always show up for clicking is /product/page/

I hope that makes sense, does anyone know how I can prevent this from happening using the jQuery Cycle package, or perhaps some fun CSS settings on each rotation_item?

Answer 1

My guess would be that your links are positioned in relation to rotation_container rather than rotation_item, and so are hanging around in their given position. If you haven’t already, try adding position: relative to the CSS for your rotation_item elements – that may very well fix your issue.