Question

我一直在尝试使用我的图层滑块在div中添加div，但我不能这样做，因为它总是超出滑块。这是我想要的外观：

http://i.stack.imgur.com/bZ5q0.jpg

当我在下面编写此代码时，我注意到在第一张幻灯片出现之前我的菜单消失了。怎么解决？也许我可以从这个“滑块效果”中禁用我的div？

<div id="full-slider-wrapper">

<div id="MENU" style="background-color:#000;float:right;width:80%;height:100px;"> random text </div>

    <div id="layerslider" style="width:100%;height:444px;">

        <div class="ls-slide" data-ls="transition2d:1;timeshift:-1000;">
                <img src="sliderimages/fw-1.jpg" class="ls-bg" alt="Slide background"/>
        </div>

        <div class="ls-slide" data-ls="transition2d:1;timeshift:-1000;">
                <img src="sliderimages/fw-2.jpg" class="ls-bg" alt="Slide background"/>
        </div>

        <div class="ls-slide" data-ls="transition2d:1;timeshift:-1000;">
            <img src="sliderimages/fw-3.jpg" class="ls-bg" alt="Slide background"/>
        </div>

        <div class="ls-slide" data-ls="transition2d:1;timeshift:-1000;">
            <img src="sliderimages/fw-4.jpg" class="ls-bg" alt="Slide background"/>
        </div>

    </div>
</div>

Answer 1

需要看到JS更好地分析，但似乎你可以修复你想要的“主”标题的位置，并给它一个z索引高于它下面的图像的carousal。

Answer 2

您的菜单div应位于滑块的div之外。像这样：

<div id="menu">
 <!--your menu code -->
</div>

<div id="slider">
  <!--your slider code -->
</div>

也许CSS可以提供帮助：

#menu{
  position:absolute;
  z-index:2; /* you can set 9999 to make it highest */
}
#slider{
  z-index:1; 
}

此W3C学校链接可能有所帮助：

http://www.w3schools.com/cssref/pr_class_position.asp

http://www.w3schools.com/cssref/pr_pos_z-index.asp

把div放在滑块里面

2 个答案: