Re: About the 'z-index' property of CSS2

Russell Griechen responded to a query:
 
>> It is about the 'z-index' property of CSS2,
>> can this property use a negative value?
>> Can't it use, unless it is zero or more?
> 
> Each element's rendering box is automatically assigned an 
integer z-index
> stacking level based on its context in the document. Boxes 
with greater
> z-axis numbers will appear in front of boxes with lower 
z-axis numbers ('0'
> and negative numbers are allowed.)

I recommend a studied reading of CSS2:9.9 "Layered Presentation". 
 I had to read the section several times before grasping the 
full implications.

First, we must distinguish stack level from the value of the 
'z-index' property.  All elements have an integer stack level: 
the specified 'z-index' integer or, for elements with a 'z-index' 
value of 'auto', 0.  However, the value 'auto' of the 'z-index' 
property is not equivalent to a zero value.  Integer values, 
including zero values, create a new local stacking context, 
while 'auto' values create no stacking contexts.

When an element creates a stacking context, it participates in 
that context with a stack level of 0.  The element 
concurrently particpates in its ancestral stacking context with 
its assigned stack level.

Stack levels are only comparable within a stacking context.  
The stacking context is not available through any single 
CSS property.  Determining an element's stacking context 
requires an inspection of its ancestry and of certain properties of 
the ancestor elements.

Elements within a stacking context may share a stack level.  In 
this case, "Boxes with the same stack level in a stacking context 
are stacked bottom-to-top according to document tree order."  
To derive what we may call a local stack specification:
  If the 'z-index' value is 'auto', there are two numbers in the 
local stack specification.  The first number is zero and the 
second number is the element's position in the element tree.
    If the 'z-index' value is an integer, there are four numbers in 
the local stack specification.  The first number is the given 
integer, the third number is zero, and the second and 
fourth numbers are the element's position in the element tree.

To derive what we may call an absolute stack specification:
  For the root element, the absolute stack specification is (0,1).
  For a non-root element, obtain the parent element's absolute 
stack specification, which has has n numbers.  Start the 
absolute stack specification of the current element with the first 
n-2 numbers of the parent's absolute stack specification.  
Append the current element's local stack specification.

The lone unresolved issue that I find is in the treatment of 
root elements.  Root elements may not be positioned 
(CSS2:9.1.2), so the 'z-index' property as defined does not apply 
to root elements.  What, then, is the stack level of a root element? 
 It should be zero.  No other value makes sense.  As a 
generalized solution, I feel that we need a correction stating that, 
for any non-positioned element, the computed value of 'z-index' 
is 'auto'.

So, given the document

<doc>
 <a>
  <a-m></a-m>
  <a-n></a-n>
  </a>
 <b>
  <b-m></b-m>
  <b-n></b-n>
  </b>
 </doc>

and the rule sets

a, a-m, a-n, b, b-m, b-n { position: absolute }
a   { z-index: 1 }
a-m { z-index: 8 }
a-n { z-index: 0 }
b   { z-index: auto }
b-m { z-index: 1 }
b-n { z-index: -1 }

we can derive the absolute stack specifications

doc :  (0,1)
a   :  (1,2 , 0,2)
a-m :  (1,2 , 8,3 , 0,3)
a-n :  (1,2 , 0,4 , 0,4)
b   :  (0,5)
b-m :  (1,6 , 0,6)
b-n : (-1,7 , 0,7)

which means that the bottom-to-top rendition will be

b-n  doc  b  a  a-n  a-m  b-m

-- 
Etan Wexler

Received on Friday, 25 January 2002 08:28:07 UTC