为什么这个 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;
}

Answer 2

元素仍然相对于彼此定位，您需要绝对定位

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

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

Answer 3

通常，对于 css 绝对定位，元素的容器也必须有一个不设置为静态的位置；我假设 xul 没有什么不同，所以我建议设置窗口元素的样式以具有相对位置。

Answer 4

布局引擎的一些实现只处理 z-index 的严格正值。

只需尝试将每个值递增 1。

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

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

另一个尝试应该是将你的窗口元素设置为 position:relative（这是另一个 CSS 陷阱，因为一个元素应该相对于相对元素绝对定位。我知道这很令人困惑，但值得快速尝试）。

编辑：

window {
position: relative;
}

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

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