CSS 变换会干扰 z-index答案

【问题标题】：CSS transform interferes with z-indexCSS 变换会干扰 z-index
【发布时间】：2014-07-18 18:59:33
【问题描述】：

我已经看到了一些关于此的问题，但他们的解决方案都不起作用。我有一个盒子网格，每个盒子都应用了 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');
});

【问题讨论】：

对不起，你是对的。 jsfiddle.net/j5q8P/1

标签： jquery html css transform z-index

【解决方案1】：

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

点赞Jonathan Sampson said

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

就这么简单。

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

将您的弹出窗口放在它的 div 之外。所以它的 z-index 不再依赖于父级。
给红框一个不同的z-index（高于另一个红框）-Example

【讨论】：