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=http://www.webdeveloper.com/forum/archive/index.php/"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=http://www.webdeveloper.com/forum/archive/index.php/"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: <!-- m --><a class="postlink" href="http://pyro.hostignition.com/~dionysus/the17thdegree/test6.html">http://pyro.hostignition.com/~dionysus/ ... test6.html</a><!-- m -->
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.
- AsherI always thought that "z-index" had to be a positive integer. I could not verify that in the W3C reccommendations (<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/visuren.html#propdef-z-index">http://www.w3.org/TR/REC-CSS2/visuren.h ... ef-z-index</a><!-- m -->). But then I looked up their definition of integer (<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/syndata.html#value-def-integer">http://www.w3.org/TR/REC-CSS2/syndata.h ... ef-integer</a><!-- m -->), 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.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.Anyone else have thoughts?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.
<img src=http://www.webdeveloper.com/forum/archive/index.php/"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=http://www.webdeveloper.com/forum/archive/index.php/"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: <!-- m --><a class="postlink" href="http://pyro.hostignition.com/~dionysus/the17thdegree/test6.html">http://pyro.hostignition.com/~dionysus/ ... test6.html</a><!-- m -->
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.
- AsherI always thought that "z-index" had to be a positive integer. I could not verify that in the W3C reccommendations (<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/visuren.html#propdef-z-index">http://www.w3.org/TR/REC-CSS2/visuren.h ... ef-z-index</a><!-- m -->). But then I looked up their definition of integer (<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/syndata.html#value-def-integer">http://www.w3.org/TR/REC-CSS2/syndata.h ... ef-integer</a><!-- m -->), 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.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.Anyone else have thoughts?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.