469,328 Members | 1,247 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,328 developers. It's quick & easy.

Tough z-index questions

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
Nov 23 '05 #1
5 3020
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
Nov 23 '05 #2
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
Nov 23 '05 #3
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
Nov 23 '05 #4
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

Nov 23 '05 #5
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
Nov 23 '05 #6

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

4 posts views Thread by leegold2 | last post: by
9 posts views Thread by Google Mike | last post: by
3 posts views Thread by eric rudolph | last post: by
28 posts views Thread by Arial | last post: by
12 posts views Thread by Mr Shore | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by suresh191 | last post: by
reply views Thread by Purva khokhar | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.