javascript - 将div放入 slider

Question

我一直在尝试使用我的图层 slider 在 div 中添加带有菜单的 div，但我做不到，因为它总是在 slider 上方。这是我想要的外观:

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

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

Link to my website

<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

您的菜单的 div 应该在 slider 的 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 Schools 链接可能有帮助:

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

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