使用 css 为 Firefox 堆叠 div

Question

我正在尝试制作一个带有加载动画的网站。此加载动画在 Chrome 中显示在所有其他 div 之上，但在 Firefox 中则不然。我有一个菜单栏、一个主 div 和一个页脚。在主要 div 中，我有一个 "main box"（将在 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。

使用 css 为 Firefox 堆叠 div

stacking divs with css for Firefox

html

css

z-index