z-index behaviour

User Help for Seamonkey and Mozilla Suite
Post Reply
jp_in_kobe
Guest

z-index behaviour

Post by jp_in_kobe »

I would like to display an image behind some text.

The following works (i.e. does what I want) on Safari but not on Mozilla:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/xhtml; charset=UTF-8" />
<title></title>
<style type="text/css">
img.x{
position:absolute;
left:0px;
top:0px;
z-index: -1
}
</style>
</head>
<body>
<h2>A header</h2>
<p>
<img class="x" src="pic.jpg" alt="a pic"/>
</p>
</body>
</html>

Other approaches which did not work:
setting the p background-color to transparent
only using non-negative z-index values (i.e. setting p's z-index to 1 and img.x's z-index to 0)

Is there a way to get Mozilla to display the text over an image without blocking out the entire image?

Also, one of my motivations for this is to get a background image which resizes. Is there some standard way to do this?

thanks,
jp
User avatar
Scarrow
Posts: 1326
Joined: November 5th, 2002, 12:20 am
Location: Japan, East
Contact:

Post by Scarrow »

Quote from <a href="http://www.dzinelabs.com/Pages/positioning_four.htm">here</a>:

Using negative Z-index isn't recommended because of browser problems: Mozilla for instance doesn't do negative z-indices.


Try stacking with a positive z-index instead.

i.e.

Code: Select all

#1{
z-index: 10;
}

#2{
z-index: 20;
}


etc...

- Scarrow
old momokatte
Posts: 0
Joined: December 31st, 1969, 5:00 pm

Post by old momokatte »

Mozilla does support negative z-indices, but it does not treat the HTML/BODY elements as the root of the stacking context. So if you leave HTML or BODY at their defaults and give a page element a negative z-index, that element is stacked behind the HTML element.

I don't like this behavior, but some devs have expressed their views on the subject and outlined the technical hurdles of changing the default stacking context in Bugzilla bug 78087.
User avatar
Scarrow
Posts: 1326
Joined: November 5th, 2002, 12:20 am
Location: Japan, East
Contact:

Post by Scarrow »

Aha.

Good to know... 8)
AMusingFool
Guest

Post by AMusingFool »

I'm having a similar problem. I'm trying to stack one image behind another. I can't really tell the stacking order, but the two images are being displayed side by side, rather than overlapping. Is this a bug? (It's in 1.5, FWIW)
Post Reply