Fancybox is hidding some element on page

Question

on my website, i click on some element that have the optioin to open some page using FancyBox, then this action is hidding my logo, and i don't know why...

can see here: http://notoriaclub.com.br/?sim (Click on DJS, then click on the DJ Photo).

Here is my LOGO code:

<div id="logo">
    <div class="logo">
        <a href="index.html">Notória Club</a>
    </div>
</div>

With this css:

#logo{
    width: 990px;
    position: relative;
    margin: 0 auto;
}
.logo{
    position: absolute;
    top:17px;
    left: 23px;
    width: 214px;
    height: 165px;
    z-index: 99;
}
.logo a{
    display: block;
    text-indent: -9999px;
    width: 214px;
    height: 165px;
    background:url(../imagens/logo_notoria.png) no-repeat;
}

And my fancyBox Setup:

$(".various").fancybox({
                maxWidth    : 800,
                maxHeight   : 600,
                fitToView   : false,
                width       : '500px',
                height      : '250px',
                autoSize    : false,
                closeClick  : false,
                openEffect  : 'none',
                closeEffect : 'none'
            });

Answer 1

What's Going On

#logo has a height of 0. For some reason, clicking the fancy box is causing it to have overflow:hidden; applied as well. There are several ways to fix the issue. We could apply height to #logo, but then we'd have to know the height, and it would be one more thing to change if you ever change the logo. Easier is just to change .logo to position:relative instead of position:absolute.

Code

Change:

.logo{
    position: absolute;
    top:17px;
    left: 23px;
    width: 214px;
    height: 165px;
    z-index: 99;
}

To:

.logo{
    position: relative;
    top:17px;
    left: 23px;
    width: 214px;
    height: 165px;
    z-index: 99;
}