Connecting Tech Pros Worldwide Help | Site Map
 
 
LinkBack Thread Tools Search this Thread
  #1  
Old November 23rd, 2005, 04:05 AM
Gérard Talbot
Guest
 
Posts: n/a
Default 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



  #2  
Old November 23rd, 2005, 04:05 AM
Gus Richter
Guest
 
Posts: n/a
Default Re: Tough z-index questions

Gérard Talbot wrote:[color=blue]
> 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.[/color]

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

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

--
Gus
  #3  
Old November 23rd, 2005, 04:05 AM
Gérard Talbot
Guest
 
Posts: n/a
Default Re: Tough z-index questions

Gus Richter a écrit :[color=blue]
> Gérard Talbot wrote:
>[color=green]
>> 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.[/color]
>
>
> Because they're in a different "stacking context" - in a different
> sub-stacking order.
>
> http://www.w3.org/TR/CSS21/visuren.html#x36[/color]

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
  #4  
Old November 23rd, 2005, 04:05 AM
Gus Richter
Guest
 
Posts: n/a
Default Re: Tough z-index questions

Gérard Talbot wrote:[color=blue]
> Gus Richter a écrit :
>[color=green]
>> Gérard Talbot wrote:
>>[color=darkred]
>>> 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.[/color]
>>
>> Because they're in a different "stacking context" - in a different
>> sub-stacking order.
>>
>> http://www.w3.org/TR/CSS21/visuren.html#x36[/color]
>
> I still don't get it.
>[/color]


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
  #5  
Old November 23rd, 2005, 04:05 AM
Gus Richter
Guest
 
Posts: n/a
Default Re: Tough z-index questions

Gérard Talbot wrote:[color=blue]
> Gus Richter a écrit :
>[color=green]
>> Gérard Talbot wrote:
>>[color=darkred]
>>> 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.[/color]
>>
>>
>>
>> Because they're in a different "stacking context" - in a different
>> sub-stacking order.
>>
>> http://www.w3.org/TR/CSS21/visuren.html#x36[/color]
>
>
> 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
>[/color]

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

  #6  
Old November 23rd, 2005, 04:05 AM
Gus Richter
Guest
 
Posts: n/a
Default Re: Tough z-index questions

Gérard Talbot wrote:[color=blue]
> Gus Richter a écrit :
>[color=green]
>> Gérard Talbot wrote:
>>[color=darkred]
>>> 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.[/color]
>>
>>
>>
>> Because they're in a different "stacking context" - in a different
>> sub-stacking order.
>>
>> http://www.w3.org/TR/CSS21/visuren.html#x36[/color]
>
>
> 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
>[/color]

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


 

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Popular Articles

What is Bytes?

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 205,414 network members.