Fancybox落后于导航菜单

Question

I have the following div structure

<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>

When my page is scrolled all the way to the top (normal loading position of the page) my Fancybox goes behind the navigation menu, but when I scroll down the page this issue is solved.

How can I do to overlay the Fancybox on top of the navigation menu? I'm using jquery.fancybox-1.3.4.js

Thanks

Answer 1

try to set the css property z-index in one class of the menu and of the fancybox div:

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

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

Elements which should be on top of others must have a greater z-index .

Answer 2

Increase z-index of fancybox element. This may help

Answer 3

Like other answers suggest z-index is what you need to implement.

But to use z-index you need to apply position:relative; (or position:absolute;) for it to work.

Answer 4

Thank you all. z-index + position relative solved my problem!