Fancybox passe derrière le menu de navigation

Question

je la structure div suivante

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

Lorsque ma page défile tout le chemin vers le haut (position de chargement normal de la page) mon Fancybox passe derrière le menu de navigation, mais quand Je fais défiler la page ce problème est résolu.

Comment faire pour superposer la Fancybox en haut du menu de navigation? J'utilise jquery.fancybox-1.3.4.js

Merci

Answer 1

Comme d'autres réponses suggèrent z-index est ce que vous devez mettre en œuvre.

Mais pour utiliser z-index, vous devez appliquer la position: relative; (ou position: absolute;) pour que cela fonctionne.

Answer 2

essayer de définir la propriété css z-index dans une classe du menu et du fancybox div:

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

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

éléments qui devrait être au-dessus des autres doit avoir un plus grand z-index.

Answer 3

Augmenter l'index z de l'élément fancybox. Cela peut aider

Answer 4

Merci à tous. z-index + position relative résolu mon problème!