Fancybox 位于导航菜单后面答案

【问题标题】：Fancybox goes behind navigation menuFancybox 位于导航菜单后面
【发布时间】：2013-08-28 06:54:24
【问题描述】：

我有以下 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

谢谢

【问题讨论】：

你可以使用绝对定位和z-index来叠加
更改fancybox z-index 大于菜单z-index 或菜单小于fancybox z-index
z-index 是唯一的解决方案...
谢谢大家的建议。

标签： javascript jquery jquery-plugins fancybox

【解决方案1】：

与其他答案一样，建议您需要实现 z-index。

但是要使用 z-index，您需要应用 position:relative; （或位置：绝对；）让它工作。

【讨论】：

到整个主容器 div 还是仅仅为了花式框？

【解决方案2】：

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

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

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

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

【讨论】：

Rob by doing this 导航栏在滚动时位于内容或图像的后面

【解决方案3】：

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

【讨论】：

【解决方案4】：

谢谢大家。 z-index + position relative 解决了我的问题！

【讨论】：