[Plugin: Meteor Slides] Absolute position widget over slideshow?

i’m trying to absolute position a widget over the slideshow on the front page. this widget contains an image tag in it, but i also want to have text go over the slideshow, as well as a div box containing some submission information.

here’s my template code:

<div class="headersliderarea"> <!-- beginning of placing postitnote -->
			<div style="clear:both;"><!-- start slideshow --></div><!-- end clearboth -->
<?php if ( function_exists( 'meteor_slideshow' ) ) { meteor_slideshow(); } ?>
	<div class="postitnoteimagearea"><!-- postitnote widget -->
	<?php if ( !function_exists('dynamic_sidebar') ||
!dynamic_sidebar('PostItNote') ) : ?>
	<?php endif; ?>
</div><!-- end postitnote widget -->

	</div><!-- end placing postitnote -->

here’s the css for it:

.postitnote {
    width:194px;
    height:193px;
    	}

.headersliderarea{
position:relative;
    float:left; /* optional */
}
.headersliderarea .postitnoteimagearea {
   position:absolute;
   top:10px; /* in conjunction with left property, decides the text position */
   left:10px;
   width:300px; /* optional, though better have one */
 }

#meteor-slideshow {
z-index:-1;
 }

.postitnoteimagearea {
z-index:0;
 }

now, before i added the z index, my widget element went BEHIND the slide show and i couldnt see it at all. then when i add the z index, the widget is the only thing that shows up and slideshow disappears.

any ideas?

https://www.ads-software.com/extend/plugins/meteor-slides/