Z Index

[SeaveeB]

I am trying to teach understand how teh Z-index works. I setup a test page with a div box, surrounded by 4 other divs in a basket weave patter, thinking that if I designated then z-index, 2, 1, 0, -1 respectivly then they would overlap like a woven basket. (I dont know if that makes sense) but the div designated "-1" disapears. am I trying to do something impossible? Or did i just miss something

div.float1 {
position: absolute;
text-align:center;
width: 500px;
height: 40px;
top: 40px;
left: 40px;
border: solid #FFFFFF;
background-color: red;
z-index: 2
}

div.float2 {
position: absolute;
text-align:center;
width: 40px;
height: 500px;
top: 10px;
left: 60px;
border: solid #FFFFFF;
background-color: red;
z-index: 1
}

div.float3 {
position: absolute;
text-align:center;
width: 500px;
height: 40px;
top: 440px;
left: 40px;
border: solid #FFFFFF;
background-color: red;
z-index: 0
}

div.float4 {
position: absolute;
text-align:center;
width: 40px;
height: 500px;
top: 10px;
left: 480px;
border: solid #FFFFFF;
background-color: red;
z-index: -1
}

div.float5 {
position: absolute;
text-align:center;
width: 360px;
height: 340px;
top: 90px;
left: 110px;
border: solid #FFFFFF;
background-color: red;
z-index: 0
}

[MonkeeSage]

[w3.org...]

Jordan

[SeaveeB]

That was fast, so what is the point in using a negative Z index?

[SeaveeB]

Thankyou for the link, it helped a lot, and of course produced more questions.

[MonkeeSage]

The z-index property sets the stack order of an element. An element with greater stack order is always in front of another element with lower stack order.

(Cite [w3schools.com]).

And supposedly, "Elements can have negative stack orders." (idem); but, when you don't specify a stack level for body and html, they are by default 0 level, and thus any negative stack values will place the negatively stacked elements behind them (i.e., making those elements invisible). At least that is my inference from experimenting with z-index a little while back. There is really no use for negative values that I have seen -- it doesn't really matter what values you use as long as the element(s) you want on top have the higher ones. No need to make the lower one a negative, even one step lower will do it.

Jordan

[SeaveeB]

Thankyou, I think sometimes I overcomplicate! That makes sense

[drbrain]

z-index goes hand-in-hand with the local stacking context. Whenever you specify a z-index, you create a new stacking context.

Here's an example:

body { margin: 0; padding: 0; }
div { position: absolute; border: 1px solid black; background: white; width: 4em; height: 4em; }
#a { top: 0; left: 0; }
#b { top: 1em; left: 1em; }
#c { top: 2em; left: 2em; z-index: -1; }
#d { top: 3em; left: 3em; }
#e { top: 4em; left: 4em; }

<span style="position: absolute; z-index: 0;">
<div id="a">One</div>
<div id="b">Two</div>
<div id="c">Three</div>
<div id="d">Four</div>
</span>
<div id="e">Five</div>

When the z-index on the span is 0, boxes One, Two, Four, and Five stack on top of each other sucessively. Since box Three has a negative z-index it is rendered behind boxes One, Two, and Four, and Five. (The stack order is [3, 1, 2, 4, 5])

If you give the z-index on the span a 1, boxes One, Two, Three and Four are rendered in front of box Five (change the position and size of box five, go ahead), but box Three is rendered behind boxes One, Two, and Four, due to its negative z-index. (The stack order is [5, 3, 1, 2, 4])

If you remove the z-index on the span, boxes One, Two, Four, and Five are rendered sucessively on top of each other, and box Three is rendered behind the root stacking context (the html element) and cannot be seen. (The stack order is [3, root, 1, 2, 4, 5])

[SuzyUK]

thanks drbrain,

that's a great explanation of z-index ;)

one for the red flag!

Suzy