W3C home > Mailing lists > Public > www-style@w3.org > May 2010

Re: [CSS21] stack level definitions in 9.9.1

From: Alan Gresley <alan@css-class.com>
Date: Sun, 23 May 2010 19:42:27 +1000
Message-ID: <4BF8F883.6090808@css-class.com>
To: Justin Poirier <poirier.justin@gmail.com>
CC: Anton Prowse <prowse@moonhenge.net>, "www-style@w3.org" <www-style@w3.org>, Sylvain Galineau <sylvaing@microsoft.com>
Justin Poirier wrote:
>>  *** Your proposal regarding auto and '0' is not included here. I found it
>>> confusing as it could be read as conflicting with the description of layer 8
>>> in Appendix E which does make a difference between auto/0 positioned
>>> descendants.
>>>
>> Indeed, there /is/ a difference.  But that difference is not related to
>> stack levels and painting layers, and hence there is no conflict.  (All
>> such elements all lie on the same painting layer [#6 in the list] of
>> whatever transpires to be their closest ancestor stacking context.)  The
>> difference is in how the closest ancestor stacking context is determined.
>>
> Sylvain, to complement what Anton is saying by rephrasing it: the difference
> between auto and 0 descendants that you note in layer 8 of E regards how
> they paint (or don't paint) THEIR descendants, and not which comes first
> between the two in the current stacking context (ie. stack level).
> 
> Justin Poirier
> Classroom306.com


Z-index auto and 0 are different if the painting order (source order) 
is different. The below examples are reduced from these test [1] [2].


Example 1:

<div class="np">
   <div class="ap z-0">ap. z = 0</div>        <!-- painted lower -->
   <div class="ap z-auto">ap. z = auto</div>  <!-- painted lower -->
</div>

<div class="rp z-auto">rp. z = auto</div>    <!-- painted higher -->


Example 2:

<div class="rp z-auto">rp. z = auto</div>    <!-- painted lower -->

<div class="np">
   <div class="ap z-0">ap. z = 0</div>        <!-- painted higher -->
   <div class="ap z-auto">ap. z = auto</div>  <!-- painted higher -->
</div>



If I have this:

<div>content</div>  <!-- painted lowest -->
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>  <!-- painted highest -->


Each div has a different painting layer. A negative top margin on each 
  div would show this clearly.




1. 
<http://css-class.com/test/css/visformatting/layers/pos-ab-and-pos-rel-layer1.htm>
2. 
<http://css-class.com/test/css/visformatting/layers/pos-ab-and-pos-rel-layer2.htm> 



-- 
Alan http://css-class.com/

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
Received on Sunday, 23 May 2010 09:43:09 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:27 GMT