CSS变换干扰z-索引

Question

我见过一些关于这方面的问题，但他们的解决方案都行不通。我有一个方框网格，每个框都有一个应用于它的CSS转换。在页面加载中，jQuery在每个框中附加一个弹出<div>，最初是不可见的。在一个盒子的滚动，弹出式显示。弹出窗口有z-index of 999，盒子有z-index of 0.但弹出式弹出出现在盒子下面。我跟踪了这和这问题的答案，但它仍然不起作用。

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中。这与转变无关。

就像乔纳森·桑普森

你不能给一个孩子比它的父母更高的z指数。

就这么简单。

没有什么可能的解决方案，你应该选择什么适合你的需要。

• 把你的弹出式弹出到它的div外面。所以它的z索引不再依赖于父级了。
• 向红色框提供不同的z-索引(高于其他红色框)- 示例