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; }

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

4 个答案: