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

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

赞Jonathan Sampson said

您不能给孩子提供比其父级更高的z-index。

这很简单。

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

将弹出放在的div之外。所以它的z-index不再依赖于父级了。
为红色框添加不同的z-index（高于其他红色框） - Example

CSS变换会干扰z-index

1 个答案: