Question

我正在使用fancybox 2 - 并且在加载之后我想在单击按钮时“显示”几个div。看似我的意思是将z-index更改为超过8030（这是fancybox的默认值）。但它没有按预期工作。我看到z-index得到了应用 - 但它仍然落后于黑色叠加层。

编辑：这是jsfiddle：http://jsfiddle.net/Z8dWa/17/

解决方案：位置：相对

的CSS：

.inline_div{
    display:none;
}
.first{
    z-index:1;
    position:fixed:
        top:1;
    left:1;
    display:block;
    width:200px;
    height:100px;
    background:#ccc;
}
#m_help{
    z-index:2;
    position:relative;
    background:white;
    color:#888;
    width:100%;
    display: block;
    padding:10px 0 10px 10px;
    margin:5px 0 5px;
}

HTML：

<div class="first">
    <a href="#help_overlay" class="inline_helper" id="m_help">Show Box</a>
    <div id="help_overlay" class="inline_div">
        <h1>It works!</h1>
    </div>
</div>

的fancybox：

$(".inline_helper").fancybox({
    maxWidth    : 500,
    maxHeight   : 500,
    autoSize    : true,
    closeClick  : false,
    scrolling   : false,
    openEffect  : 'elastic',
    openSpeed   : 150,

    closeEffect : 'elastic',
    closeSpeed  : 150

});

按钮点击：

$('#m_help').click(function(){
    $('#m_help').css('z-index','8050');
});

我想念什么？

Answer 1

添加更多值，例如：

$('#m_help').click(function(){
    $('#m_help').css('z-index','10000');
});

另外，请使用Firebug检查z-index以使div可见。

Answer 2

http://jsfiddle.net/Z8dWa/16/

将#m_help更改为position:fixed。然后它起作用......需要一些美化，但它有效。

Answer 3

将position:relative添加到#m_help解决它。

http://jsfiddle.net/Z8dWa/17/

Fancybox 2在加载后更改z-index

3 个答案: