代码之家 › 专栏 › 技术社区 › Student

为什么这个css z索引在我的XUL应用程序中不起作用?

xul css

4

Student · 技术社区 · 14 年前

我有这个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中。知道怎么修吗?

解决办法

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

4 回复 | 直到 14 年前

1

2

y34h 14 年前

编辑: 明白了:没有丑陋的边缘攻击

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

2

1

John Hartsock 14 年前

元素仍然相对放置,你需要绝对定位

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

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

3

0

Alex Rosario 14 年前

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

4

0

Davis Peixoto 14 年前

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

尝试将每个值递增1。

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

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

另一个尝试应该是将窗口元素设置为位置:相对(这是另一个CSS问题,因为一个元素应该相对一个相对的元素绝对定位。我知道这很混乱,但值得一试。

编辑:

window {
position: relative;
}

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

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