z-index issues

[thejoker101]

I've never done much with the z-index as I've not seen any thing I could use it for before now. However, I've come across an instance where it is applicable ( at least I think so, feel free to offer up other ideas ). I have this set of code:

<img src="i/circle.gif" style="position:absolute;left:150px;z-index:-1;"><br>
<div style="border:solid black 1px; background-color:silver;color:black;padding:10px;z-index:10;margin-left:20px;">###<br/>###<br/>###<br/>###<br/>###<br/>###<br/>###</div>
<br/><br/>
<img src="i/circle.gif" style="position:absolute;left:150px;z-index:0;"><br>
<div style="border:solid black 1px; background-color:silver;color:black;padding:10px;z-index:10;margin-left:20px;">###<br/>###<br/>###<br/>###<br/>###<br/>###<br/>###</div>

The top one will put the image behind the text and behind all of my other div's. The second one will put it on top of my div. I want it to be just behind the div and above all else.

To see a working example of this, see my test page here: http://pyro.hostignition.com/~dionysus/the17thdegree/test6.html

That's probably the best place to see what's going on.

As soon as I set the z-index to a negative number it jumps behind everything, when I set it to any positive number it's on top of everything. Is this because I don't have z-index's set on anything else except the div it's supposed to be behind?

Thank you for your input.

- Asher

[gil davis]

I always thought that "z-index" had to be a positive integer. I could not verify that in the W3C reccommendations (http://www.w3.org/TR/REC-CSS2/visuren.html#propdef-z-index). But then I looked up their definition of integer (http://www.w3.org/TR/REC-CSS2/syndata.html#value-def-integer), and it states:Note that many properties that allow an integer or real number as a value actually restrict the value to some range, often to a non-negative value.That made me feel a little better.

The bottom-most object has a z-index of 0. A higher z-index number will appear stacked on top of one with a lower number.

[thejoker101]

I attempted to put the text div ( the higher div ) as a z-index 1 greater than that of the image. That doesn't seem to work, however.

I updated the test page above to reflect such an example ( the image div has a z-index of 11 and the text div has a z-index of 12 - the z-index should be on top, yet it isn't ).

'Tis perplexing.

[thejoker101]

Anyone else have thoughts?

[Khalid Ali]

Your problem lies in the fact that you have image
position:absolute;

and the text block is positioned:relative(if position is not given then it will inherit from the top most parent,by default its relative)

A positioned element is painted on top of a relatively positioned element.
Solution will be either make your image and text both position absolute...to see z-index work the way u intend.