css - 为什么这个 css z-index 在我的 XUL 应用程序中不起作用？

Question

我有这个 Xul 文件:

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<?xml-stylesheet href="chrome://greenfox/content/mycss.css" type="text/css"?>

<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

    <image class="Front" src="images/loading.gif"/>
    <image class="Back" src="images/plasma.jpg"/>

</window>

使用此 CSS (已更新):

.Back {
    position: absolute;
    left: 0px;
    top:0px;
    z-index:0;
}

.Front {
    position: absolute;
    left: 0px;
    top:0px;
    z-index:1;
}

而且，出于某种原因，图像是垂直的一个在另一个之上，而不是我的 CSS 指定的 z-index。知道如何解决吗？

解决方法

有一段时间，我使用的是一个没有背景和边框的新窗口，中间是“正在加载”。

Answer 1

编辑: 明白了 :D 没有丑陋的边距黑客攻击

<bulletinboard>
    <image src="images/loading.gif" style="top:0px; left:0px; z-index:1"/>
    <image src="images/plasma.jpg" style="top:0px; left:0px; z-index:0"/>
</bulletinboard>

--下面的旧解决方案--

这似乎可行:

.Front {
    position: absolute;
    left: 0px;
    top:0px;
    z-index:1;
    width: 200px;
    height: 200px;
    margin-bottom: -200px;
}

.Back {
    position: absolute;
    left: 0px;
    top:0px;
    z-index:0;
    width: 200px;
    height: 200px;
}