Fancybox goes behind navigation menu

0
votes

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

4
javascriptjqueryjquery-pluginsfancybox
you can use absolute positioning with z-index to overlay - Voonic
change fancybox z-index greated than menu z-index or menu smaller than fancybox z-index - rajesh kakawat
z-index is the only solution ... - chhameed
Thanks guys for the suggestion. - VDD

4 Answers

0
votes

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.

0
votes

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.

0
votes

Increase z-index of fancybox element. This may help

0
votes

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