Question

我有以下div结构

<div class="page">
     <div id="top" class="header-container">
         <!-- navigation menu and search box in here -->
     </div>
     <div class="main-container col1-layout">
         <!-- Fancybox for photo gallery and onther content in here -->
     </div>
</div>

当我的页面一直滚动到顶部（页面的正常加载位置）时，我的Fancybox会在导航菜单后面，但当我向下滚动页面时，这个问题就解决了。

如何在导航菜单上叠加Fancybox？我正在使用jquery.fancybox-1.3.4.js

由于

Answer 1

尝试在菜单和fancybox div的一个类中设置css属性z-index：

.header-container {
    z-index: 1;
}

.main-container {
    z-index: 2;
}

应该位于其他元素之上的元素必须具有更大的z-index。

Answer 2

增加fancybox元素的z-index。这可能会有所帮助

Answer 3

与其他答案一样，建议z-index是您需要实施的目标。

但要使用z-index，你需要应用position：relative; （或位置：绝对;）让它起作用。

Answer 4

谢谢大家。 z-index +位置相对解决了我的问题！

Fancybox落后于导航菜单

4 个答案: