html - Fancybox 在页面上隐藏了一些元素

Question

在我的网站上，我单击了一些可以选择使用 FancyBox 打开某个页面的元素，然后这个操作隐藏了我的 Logo ，我不知道为什么...

可以在这里看到:http://notoriaclub.com.br/?sim (单击 DJS，然后单击 DJ 照片)。

这是我的LOGO代码:

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

使用这个 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;
}

还有我的 fancyBox 设置:

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

Answer 1

发生了什么

#logo 的高度为 0。出于某种原因，单击花哨的框会导致它也应用 overflow:hidden;。有几种方法可以解决此问题。我们可以将高度应用到 #logo，但那样我们就必须知道高度，如果您更改了 Logo ，那将是另一回事。更简单的方法是将 .logo 更改为 position:relative 而不是 position:absolute。

代码

变化:

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

收件人:

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