Question

I’m using wordpress and I used a plugin called “meteor slideshows” that I believe is jQuery. I’m trying to absolutely position a widget over the slideshow, however, it is not functioning correctly.

this is 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 -->

I also put the site online over at: http://fortmovies.com/pestcon/

If you look at the homepage where it says “test” is the widget that I am trying to display over the slideshow, which you can’t see. you can make it visible if you mess with firebug a little bit I think.

But I have no idea how to display it over the sildeshow.. part of me thinks it’s not possible because it’s a slideshow php plugin that I’m using to insert it into the template… or maybe I’m missing a simple code?

Answer 1

Absolutely positioned elements are positioned relative to the closest parent element that also has a defined position I.e. relative, fixed, or absolute. So in This case you need to define the position of the slides container most likely, and then place your custom element within the container.

You could just wrap a container div around where the plugin gets inserted in the template, and position your element that way, or you could use the structure provided by the slideshow plugin.

Also don’t forget about the z-index. Once inserted into the slideshow container your custom element will need to have the greates z-index value without interfering with any links. This can get tricky when dealing with positioned elements that overlap, so make sure that when you get it working, all your links and buttons are still clickable.

Edit 1
Okay so first of all, your .postitnoteimagearea should have a z-index of 99 or greater. And I am not too sure that your slideshow plugin is working properly. It doesn’t seem to be appearing. Even when I messed around with the css, it seems to only show one image that is has a visibility property of “hidden”. Does the slideshow work for you? Also you don’t want to adjust the visibility of the slideshow by giving it a lower z-index value, you simply want to give the element that you want in front of it, a greater z-index value.