如何在 jquery 幻灯片上绝对定位？

Question

我正在使用 wordpress，我使用了一个名为“meteor slideshows”的插件，我相信它是 jQuery。我试图在幻灯片上绝对定位一个小部件，但是，它不能正常工作。

这是我的模板代码：

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

我还将网站放在网上：http://fortmovies.com/pestcon/

如果您查看显示“测试”的主页，这是我试图在幻灯片上显示的小部件，您看不到。如果你稍微弄乱了萤火虫，我认为你可以让它可见。

但我不知道如何在 sildeshow 上显示它。我的一部分认为这是不可能的，因为它是一个幻灯片 php 插件，我用它来将它插入到模板中......或者我错过了一个简单的代码？

Answer 1

绝对定位的元素是相对于最近的父元素定位的，该父元素也有一个定义的位置，即相对的、固定的或绝对的。所以在这种情况下，您最有可能需要定义幻灯片容器的位置，然后将您的自定义元素放置在容器中。

您可以在插件插入模板的位置包装一个容器 div，然后以这种方式定位您的元素，或者您可以使用幻灯片插件提供的结构。

也不要忘记 z-index。插入幻灯片容器后，您的自定义元素将需要具有最大的 z-index 值，而不会干扰任何链接。在处理重叠的定位元素时，这可能会变得很棘手，因此请确保当您开始使用它时，您的所有链接和按钮仍然是可点击的。

编辑 1 好的，首先，您的 .postitnoteimagearea 的 z-index 应该为 99 或更大。而且我不太确定您的幻灯片插件是否正常工作。它似乎没有出现。即使我弄乱了css，它似乎也只显示了一个具有“隐藏”可见性属性的图像。幻灯片对您有用吗？此外，您不想通过给它一个较低的 z-index 值来调整幻灯片的可见性，您只是想给它前面的元素一个更大的 z-index 值。

Answer 2

CSS。您需要为小部件 div 提供比幻灯片的 z-index 更高的 z-index。 z-index 本质上是一个层级，因此如果幻灯片的 z-index 为 1，而小部件的 z-index 为 2，则 2 将优先于 1 并成为顶层。