jquery - CSS 变换干扰 z-index

Question

我看到了一些与此相关的问题，但他们的解决方案都不起作用。我有一个盒子网格，每个盒子都应用了 CSS 转换。在页面加载时 jQuery 会附加一个弹出窗口 <div> ，最初对每个盒子是不可见的。翻转某个框时，会显示该弹出窗口。弹出窗口有 z-index的999 ，盒子上有 z-index的0 。但弹出窗口出现在框下方。我已关注 this 的答案和 this问题，但还是不行。

JSFiddle

HTML:

<a id="aaa" class="box effect-4"></a>
<a id="bbb" class="box effect-4"></a>

CSS:

.box {
    width:335px;
    height:203px;
    float:left;
    margin:0 15px 15px 0;
    position:relative;
    -webkit-transform: translate3d(0px, 0px, 0px);
    z-index:0;
}
.popup {
    width:325px;
    height:340px;
    background:#333;
    z-index:99; 
    position:absolute;
    display:none;
    -webkit-transform: translate3d(0px, 0px, 0px);
}
.effect-parent {
    -webkit-transform: perspective(1300px);
    -moz-transform: perspective(1300px);
    transform: perspective(1300px);
}
.effect-4 {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    -webkit-transform: rotateX(-80deg);
    -moz-transform: rotateX(-80deg);
    transform: rotateX(-80deg);
    -webkit-animation: flip ease-in-out forwards;
    -moz-animation: flip ease-in-out forwards;
    animation: flip ease-in-out forwards;
}

jQuery:

jQuery(document).ready(function() {
    $('.box').each(function() {
        $(this).append(popupMarkup);
    });
    $(document).on({
        mouseenter: function(){
        var popup= 'popup'+$(this).attr('id');
        $('#'+popup).fadeIn();
    },
    mouseleave: function() {
        var popup= 'popup'+$(this).attr('id');
        $('#'+popup).fadeOut();
    }
    }, '.box');
});

Answer 1

这是因为您的弹出窗口位于另一个具有默认 z-index 的 div 内。与转型无关。

喜欢Jonathan Sampson said

You can't give a child higher z-index than its parent.

就这么简单。

可能的解决方案很少，您应该选择适合您需求的解决方案。

• 将弹出窗口放在其 div 之外。所以它的 z-index 不再依赖于父级。
• 为红色框指定不同的 z-index(高于其他红色框)- Example