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