[jQuery] Cycle Plugin and z-index

[jQuery] Cycle Plugin and z-index


Hi,
I'm using M. Alsup's Cycle plugin to transition between a series of
images. This is working as expected, but I'm having problems getting
an additional image to appear "above" them, at a higher z-index. I've
tried giving both elements a fixed z-index, and by using a transparent
slide I'm able to verify that the overlay is being positioned
correctly, but it seems like something is interfering with the normal
z-index rules.
Any ideas?
HTML:
<div id="picwrapper">
<img src="images/overlay.png" alt="" id="overlay" />
<div id="pics">
<div class="slide"><img src="images/slide1.jpg" width="920"
height="200" />
<span class="slidetitle">Slide 1 caption</span>
</div>
<div class="slide"><img src="images/slide2.jpg" width="920"
height="200" />
<span class="slidetitle">Slide 2 caption</span>
</div>
</div>
</div>
CSS:
#picwrapper{
position: absolute;
top: 47px;
}
#picwrapper #overlay{
position: absolute;
top: 5px;
right: 10px;
z-index: 1000;
}
#pics{
z-index: 900;
}
JS:
<script type="text/javascript">
jQuery('#pics').cycle( { pause: 1, speed: 4000, timeout: 4000 } );
</script>
Thank you,
Matthew