Geek Answers Handbook

Why is this css css index not working in my XUL application?

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"> <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 the other, and not in the z-index, as pointed out by my CSS. Any idea how to fix this?

workaround

While I use a new window with no background and no borders, and “loading” in the center.

+4
source share
4 answers

edit: got: D without ugly markers.

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

it works:

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

Elements are still located relative to each other, which you need to position absurdly

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

usually for absolute css positioning the element container should also have a position not statically; I would suggest that xul is no different, so I suggest the window element style has a relative position.

0
source

Some implementations of layout mechanisms deal only with strict positive values ​​for the z-index.

Just try increasing 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 attempt should be for your window element to be positioned at: relative (this is another way to get CSS, because one element must be absolutely positioned relative to the relative element. I know this is confusing, but it's 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; }
0
source

More articles:


All Articles