Make fancybox appear on top

Question

I have set up a link to an image using fancybox but when I click on the thumbnail the fancybox box appears behind all my content. I have been using z-index to place other content in the page so I think I need to do the same for the fancybox but I don't know where to place the css code?

Answer 1

Fancybox has it's own CSS file, and you should look for #fancybox-wrap and change it's z-index'es there. But anyways, it has pretty high setting by default (1101 on mine), therefore I'd suggest altering your own HTML/CSS.

Just in case, check if you have added that fancybox stylesheet in your HTML.

Answer 2

I've addded:

.fancybox-overlay {
    z-index: 1000000 !important;
}

in my stylesheet for recent version of fancybox.

Answer 3

In my case, using WordPress 4.1 and Fancybox plugin, I solved the problem adding this CSS rule:

div#fancy_outer {
z-index: 1000000;
}