html - 为 Firefox 使用 css 堆叠 div

Question

我正在尝试制作一个带有加载动画的网站。此加载动画在 Chrome 中显示在所有其他 div 之上，但在 Firefox 中则不然。我有一个菜单栏、一个主 div 和一个页脚。在主 div 中，我有一个“主框”(将在 3D 中旋转)和一个加载 div。loading div 承载加载动画。HTML 类似于以下内容:

<div id="site">
    <div id="menuDiv" class="mainSection"> Menu bar</div>
    <div id="mainDiv" class="mainSection">
        <div id="mainBox">
            <div class="mainBoxSide front">
            </div>
            <div class="mainBoxSide right">
            </div>
            <div class="mainBoxSide back">
            </div>
            <div class="mainBoxSide left">
            </div>
        </div>
        <div id="loadingDiv">
            <div id="loadingBox">
                <div class="loadingBoxSide loading-front"></div>
                <div class="loadingBoxSide loading-right"></div>
                <div class="loadingBoxSide loading-back"></div>
                <div class="loadingBoxSide loading-left"></div>
            </div>
        </div>

   </div>
</div>
<div id="footer" class="mainSection">Footer</div>

我希望 mainDiv 位于页脚之上，而 loadingDiv 位于 mainBox 之上。所以就 z-index 而言:footer < mainBox < loadingDiv.

我创建了一个代码笔来隔离问题:https://codepen.io/3MO/pen/vmOMEG

在 Chrome 中打开时，一切正常。在 Firefox 中打开时，动画闪烁:它一直在 mainBox 元素的顶部和背景上，我不知道为什么。

更糟糕的是:如果我为加载 div 提供背景颜色，一切正常:我创建了另一个代码笔，确切的分支并为 loadingDiv 定义了背景颜色:https://codepen.io/3MO/pen/XRbQjQ

有人能知道为什么会这样吗？我需要使用透明的 div，因此没有任何背景色。

谢谢!

Answer 1

尝试将 transform: translate3d(0,0,1px); 添加到 div #loadingDiv。