Why this css z-index is not working in my XUL app?

Question

I have this Xul file:

<?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"&gt;

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

</window>

with this CSS (updated):

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

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

and, for some reason, the images are vertically one above another, not in z-index as specified by my CSS. Any idea how to fix it?

workaround

For while, I'm using a new window with no background and no borders, and the "loading" in the center.

Answer 1

The elements are still positioned relatively to one another you need to position absoutely

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

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

Answer 2

edit: got it :D without ugly margin hacks

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

--old solution below--

this seems to work:

.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 3

usually, for css absolute positioning, an element's container also has to have a position not set to static; i'd assume xul is no different, so i suggest styling the window element to have a relative position.

Answer 4

Some implementations of layout engines just deal with strict positive values for z-index.

Just try incrementing each value by 1.

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

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

Another try should be setting your window element to position:relative (this is another CSS gotcha, because one element should be absolutely positioned relatively to a relative element. I know it is confusing, but worth a quick try).

EDIT:

window {
position: relative;
}

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

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