0

我有一个简单的基本 JQuery 图像滑块，效果很好，但我试图在顶部放置一个 div。现在，如果我将 div 放在每张幻灯片上，但我希望让一个 div 坐在那里，而图像淡入下一张，它就可以工作了。

<div id="slider-wrapper" style="margin-top: 100px;">

        <div style="float: left; background:rgba(255,255,255, 0.9);  padding-left: 40px; padding-top: 30px; padding-bottom: 20px; width: 450px; height: 165px; z-index: 99999;">
        <h1 style="font-size: 28pt;">
        <?php include("profileuserdata.php"); ?>
        </div>

        <div id="editslide">
        <ul id="jsddm">
        <li><a href="#">Change</a>
        <ul>
            <li><a href="#">Upload File</a></li>
            <li><a href="#">From Your Folio...</a></li>
        </ul>
        </ul>
        </div>




        <div id="slider">

        <div class="sp" style="background:url(http://topwalls.net/wallpapers/2012/11/Wallpaper-Rays-Color-Black-Background-1024x1024.jpg); width: 980px; height: 340px; padding-top: 120px; paddin-bottom: 20px; margin-top: -40px; margin-bottom: 0px;">

        </div>

它不能应用于每张幻灯片的原因是因为我覆盖的 div 包含用户可以动态编辑的用户数据，但是如果 div 在移动到下一张图像时坐在幻灯片上，编辑框只会当它回到那张幻灯片时显示...

我使用了z-index，当它淡出时可以看到滑动图像下方的div，这里是滑块的css：

<style>
#slider-wrapper {width:500px; height:200px; z-index: 00000;}
#slider {width:500px; height:200px; position:relative;z-index: 00000;}
.sp {width:500px; height:200px; position:absolute;z-index: 00000;}
</style>
4

0 回答 0