Putting absoute position widget over slideshow?

  • Resolved sabster

    (@sabster)


    12 years, 3 months ago

    i’m using a plugin called meteor slideshow for wordpress to try to do this.

    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/

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter sabster

    (@sabster)

    here’s an example of my site:

    fortmovies.com/pestcon

    on the homepage, hwere hte “test” is at the top is my test widget, and then behind that is the meteor slideshow, but it is hidden when i incrase the z idnex for some reason, then you can see the slideshow reappear if you use firebug and remove the abosoute positioning from the slideshow… not sure what is happening her.e…

    The widget does not not seem to cover the slideshow.
    I tested it adding these settings in the CSS:

    .textwidget { background: blue; }

#meteor-slideshow {
background: orange;
z-index: 0; /* be careful, yours is -1 */
 }

    I think your problem relies in that z-index you set to -1.
    Like so this div disappears behind its parent div and everything else….

    If you simply remove that z-index it should work.

    Thread Starter sabster

    (@sabster)

    yeah the z index was the problem. i got it to work by removing z index from the slideshow outter div and then putting a z index on the widget of 100.. not sure why it worked but smoeone else suggested it.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Putting absoute position widget over slideshow?’ is closed to new replies.