z-index 在 Firefox 中的行为不同答案

【问题标题】：z-index behaves differently in firefoxz-index 在 Firefox 中的行为不同
【发布时间】：2012-02-16 21:05:16
【问题描述】：

我有以下代码

#flipper #Front {
    z-index:81;
}
#flipper #Back {
    z-index:80;
}
.face{
    position:absolute;
    width:100%;
    height:100%;
}
.front{
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
}
#flipper > * {
    max-width:100px;
    cursor:pointer;
}


       <div id='flipper'>
        <div id='Front' class='front face'>
            <img src='images/front.gif'>
        </div>
        <div id='Back' class='back face'>
            <img src='images/back.gif'>
            <a href="/link" title="get in /here/" style="position: relative; top: -100px; display:none;">peek</a>
        </div>

    </div>

和脚本

/* flip */

function flipOwlly() {
        if (Side=='front') {
                jQuery('#flipper').css('-webkit-transform','rotateY(180deg)');
                jQuery('#flipper').css('-moz-transform','rotateY(180deg)');
                jQuery('#Front').css('z-index','79');
                jQuery('#flipper a[href="/login"]').css('display', 'inline-block');
                Side = 'back';
        } else {
                jQuery('#flipper').css('-webkit-transform','rotateY(360deg)');
                jQuery('#flipper').css('-moz-transform','rotateY(360deg)');
                //setTimeout(jQuery('#Front').css('z-index','81'), 550);
                jQuery('#Front').css('z-index','81');
                owllySide = 'front';
        }
        return false;
}

编辑添加 JS 代码

我有一个 jquery 代码来运行 css 动画来翻转整个#flipper 元素，然后将前面的 z-index 更改为 79 [和后面]。

我的问题是这在 Firefox 和 chrome 上显示不同。在 Firefox 中，更高的 z-index 数将我的图像发回！所以当页面加载的时候，逻辑顺序没问题，但是后面的图片在前面的上面....

即使是 IE 也能很好地呈现它！怎么回事？

【问题讨论】：

顺便说一句：如果您使用 z-index 来操纵可见性，为什么要翻转元素？

标签： jquery css cross-browser z-index

【解决方案1】：

发布您的 jquery 代码可能会有所帮助。无论如何，我测试了翻转 z-index 和它seems to be working：

$(document).ready(function()
{
    $("#flipper").click(function()
    {
        $("#Front").css("z-index", $("#Front").css("z-index") == "79" ? "81" : "79"); 
    });
});

但是，如果您只是想在图像之间切换，最好使用toggle their visibility 而不是它们的 z-indexes：

#flipper #Back 
{
    display: none;
}

$(document).ready(function()
{
    $("#flipper").click(function()
    {                     
        $("#Front").toggle();
        $("#Back").toggle();
    });
});

【讨论】：

不，我实际上是为它制作动画以获得翻转效果。但这根本不是问题，翻转和开关工作，但顶部图像 [81] 的初始 z-index 值似乎低于其背面 [80] ，但仅限于 FF .. 你可以查看它在 obnoxiousowl dot com 上 - 它在右侧，右键单击它
也许您的问题的 jsFiddle 示例会更清楚。
你看了吗？

【解决方案2】：

我解决这个问题的方法是一种解决方法，我真的不喜欢，但这是我能找到的唯一方法..

因为我每边都有 2 个 div，所以我只是在背面设置了一个“display:none”，所以即使浏览器错误地决定显示它，它也不会显示它！

【讨论】：