Tough z-index questions

[Gérard Talbot]

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]

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]

Gus Richter a écrit :

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

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]

Gérard Talbot wrote:

Gus Richter a écrit :

Gérard Talbot wrote:

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 ?

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

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]

Gérard Talbot wrote:

Gus Richter a écrit :

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

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]

Gérard Talbot wrote:

Gus Richter a écrit :

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

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