Stylesheets - Tough z-index questions

Author

Tough z-index questions

Gérard Talbot

2005-11-16, 10:26 pm

Hello fellow colleagues,

Can someone explain to me why, in this page
http://www.aplus.co.yu/css/z-pos/index4.php#content ,
AP1 should not be in front of (overlapping) AP2 ?

Recap:
RP1 is relatively positioned block, with z-index:11

AP1 is an absolutely positioned block, with z-index:10, nested inside RP1

RP2 is relatively positioned block, with z-index: auto

AP2 is an absolutely positioned block, with z-index:20, nested inside RP2

-------

In the second example where
RP1 has z-index: 11
AP1 has z-index: 1000
RP2 has z-index: auto
AP2 has z-index: 20
I do not see/understand why AP1 shouldn't be in front of AP2.

Gérard
--
remove blah to email me

Gus Richter

2005-11-16, 10:26 pm

Gérard Talbot wrote:
> Hello fellow colleagues,
>
> Can someone explain to me why, in this page
> http://www.aplus.co.yu/css/z-pos/index4.php#content ,
> AP1 should not be in front of (overlapping) AP2 ?
>
> Recap:
> RP1 is relatively positioned block, with z-index:11
>
> AP1 is an absolutely positioned block, with z-index:10, nested inside RP1
>
> RP2 is relatively positioned block, with z-index: auto
>
> AP2 is an absolutely positioned block, with z-index:20, nested inside RP2
>
> -------
>
> In the second example where
> RP1 has z-index: 11
> AP1 has z-index: 1000
> RP2 has z-index: auto
> AP2 has z-index: 20
> I do not see/understand why AP1 shouldn't be in front of AP2.

Because they're in a different "stacking context" - in a different
sub-stacking order.

http://www.w3.org/TR/CSS21/visuren.html#x36

--
Gus

Gérard Talbot

2005-11-16, 10:26 pm

Gus Richter a écrit :
> Gérard Talbot wrote:
>
>
>
> Because they're in a different "stacking context" - in a different
> sub-stacking order.
>
> http://www.w3.org/TR/CSS21/visuren.html#x36

I still don't get it. RP1 has a greater stack level than RP2. So it
should be in front of RP2. 11 is greater than 0.

"Boxes with greater stack levels are always formatted in front of boxes
with lower stack levels."

Now, the sub-stack level shouldn't change that. 11.10 is still greater
than 0.20.
"For those with 'z-index: auto', treat the element as if it created a
new stacking context, but any descendants which actually create a new
stacking context should be considered part of the parent stacking
context, not this new one."
http://www.w3.org/TR/CSS21/zindex.html#q2

Gérard
--
remove blah to email me

Gus Richter

2005-11-17, 3:23 am

Gérard Talbot wrote:
> Gus Richter a écrit :
>
>
> I still don't get it.
>

RP2 current stacking context=10 local stacking context=0
AP2 local stacking context=10
RP1 current stacking context=11 local stacking context=0
AP1 local stacking context=1000

--
Gus

Gus Richter

2005-11-17, 3:23 am

Gérard Talbot wrote:
> Gus Richter a écrit :
>
>
>
> I still don't get it. RP1 has a greater stack level than RP2. So it
> should be in front of RP2. 11 is greater than 0.
>
> "Boxes with greater stack levels are always formatted in front of boxes
> with lower stack levels."
>
> Now, the sub-stack level shouldn't change that. 11.10 is still greater
> than 0.20.
> "For those with 'z-index: auto', treat the element as if it created a
> new stacking context, but any descendants which actually create a new
> stacking context should be considered part of the parent stacking
> context, not this new one."
> http://www.w3.org/TR/CSS21/zindex.html#q2
>

Sorry, I mixed up the 1st and 2nd example in my deleted initial
response. Here is the way I see it in order of bottom to top, or back to
front for the first example:

RP2 z-index:auto or zero (does not establish a new local stacking
context.)
RP1 z-index:11 (current stacking context) z-index:0 (local stacking
context)
AP1 z-index:11 (local stacking
context)
AP2 z-index:20 (current stacking context)

--
Gus

Gus Richter

2005-11-17, 3:23 am

Gérard Talbot wrote:
> Gus Richter a écrit :
>
>
>
> I still don't get it. RP1 has a greater stack level than RP2. So it
> should be in front of RP2. 11 is greater than 0.
>
> "Boxes with greater stack levels are always formatted in front of boxes
> with lower stack levels."
>
> Now, the sub-stack level shouldn't change that. 11.10 is still greater
> than 0.20.
> "For those with 'z-index: auto', treat the element as if it created a
> new stacking context, but any descendants which actually create a new
> stacking context should be considered part of the parent stacking
> context, not this new one."
> http://www.w3.org/TR/CSS21/zindex.html#q2
>

I hope that I'm going to get it right this time!
Sorry, I mixed up the 1st and 2nd example in my deleted initial
response. Here is the way I see it in order of bottom to top, or back to
front for the first example:

RP2 z-index:auto or zero (does not establish a new local stacking
context.)
RP1 z-index:11 (current stacking context) z-index:0 (local stacking
context)
AP1 z-index:10 (local stacking
context)
AP2 z-index:20 (current stacking context)

--
Gus