jquery cycle and z-index issue

jquery cycle and z-index issue

I'm having trouble with the z-order in a slideshow made with cycle. Basically, my slides are an unordered list. Each list item is a slide with a background image, some text and a link. The relevant snippets of code are shown below. You should easily be able to take this code and make a test page if it would help.

I have two absolutely positioned elements. One that is a div that goes around the entire <ul> that kind of frames the slide show. A second one is the link inside each <li>. The problem is that the link inside the <li> isn't clickable, even though it displays correctly.

I think I have the z-index set correctly for all elements. If I turn off the slide show, it is clickable, suggesting I have it correct. If I remove the outside "frame" <div>, it is also clickable. It is only when they are both present, and the slide show is running, that the link becomes dead.

I have a pager turned on, but that doesn't affect this situation. I left it in, because it represents another absolutely positioned element that does work within the "frame".  Both the pager and the frame are positioned above the slide. So, it seems something is happening when the slide show runs that I don't understand and is conflicting with elements it doesn't know about.

Here's the code. If anyone has an idea, I'd greatly appreciate some insight into what I'm doing wrong.

Thanks!



  1. <script type="text/javascript">
  2. $(document).ready(function() {
  3. $('.slides').before('<div class="pager">').cycle({
  4. fx: 'fade',
  5. pager: 'div.pager',
  6. pagerEvent: 'mouseover', 
  7. pauseOnPagerHover: true
  8. });
  9. });
  10. </script>

  11. <style>
  12. div, ul, li { margin: 0; padding: 0; }
  13. .ss { width: 200px; height: 100px; position: relative; background: yellow; }
  14. .ss-overlay { position: absolute; width: 196px; height: 96px; top: 0px; left: 0px; z-index: 2000; border: 2px solid red; }
  15. .ss ul li { background: blue; width: 200px; height: 100px; color: white; }
  16. .ss ul li a { display: block; color: yellow; position: absolute; left: 25px; top: 35px; width: 75px; height: 30px; background: yellow; z-index: 9000; }
  17. .ss div.pager { position: absolute; bottom: 10px; right: 10px; z-index: 3000; }
  18. .ss div.pager a { background: none repeat scroll 0 0 #333; display: block; float: left; height: 12px; width: 12px; margin-right: 5px; text-decoration: none; text-indent: -99em; }
  19. .ss div.pager a.activeSlide { background: none repeat scroll 0 0 #ff9933; }
  20. </style>

  21. <!-- html markup -->
  22. <div class="ss">
  23. <ul class="slides">
  24. <li>hello one<a href="http://www.one.com"></a></li>
  25. <li>hello two<a href="http://www.two.com"></a></li>
  26. <li>hello three<a href="http://www.three.com"></a></li>
  27. </ul>
  28. <div class="ss-overlay"></div>
  29. </div>