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

Re: [CSS21] stack level definitions in 9.9.1

From: Bert Bos <bert@w3.org>
Date: Wed, 7 Jul 2010 14:29:43 +0200
To: "www-style@w3.org" <www-style@w3.org>
Message-Id: <201007071429.43371.bert@w3.org>
On Saturday 19 June 2010 02:56:44 Sylvain Galineau wrote:
> Following up on CSS21 issue-60 [1]. Note that while this constitutes
> my final proposal for the purpose of resolving the issue in CSS2.1
> this is not in any way meant to suggest the feedback you, Justin and
> others sent on this topic that is not addressed here was deemed
> incorrect or irrelevant. It should be addressed in future CSS
> revisions.
>
> The set of proposed changes is somewhat larger than I originally
> intended but you have convinced me of their coherence. I believe them
> to be sufficient for this revision of the spec.
>
> The proposed edits are as follows; they are meant to be accepted or
> rejected as a whole:

Here is my review:

a) There are some occurrences of "non-positioned floats," which seem to 
mean simply "floats." (There is no such thing as a positioned float.)

b) Layer 6 in edit 3 contains a with-phrase ("with stack level 0") that 
is ambiguous. The sentence can mean

    [positioned descendants and stacking contexts] with stack level 0
or
    [positioned descendants] and [stacking contexts with stack level 0]

It means the former, but that requires considerable thinking: one tends 
to overlook that stack level zero includes elements with 'z-index: 
auto'.

c) The "descendants" in the list of seven layers are of two types: 
elements that belong to this stacking context and elements that create 
child stacking contexts. The third kind, descendants that belong to 
other stacking contexts, are not mentioned. It's easy to omit the 
word "descendant" in layers 2, 6 and 7 so that all occurrences are of 
the first type.

d) I have trouble understanding edit 4 and Anton Prowse's insertion 
of "and of" doesn't help. Here is how I interpret the sentence:

    The contents of
      1) positioned elements with 'z-index: auto',
      2) non-positioned floats [= floats],
      3) inline blocks and
      4) inline tables
    are stacked as if they [= those four kinds of elements] generated
    new stacking contexts, except that
      a) any positioned elements [= their positioned descendants] and
      b) any elements [= their descendants] that actually create new
         stacking contexts
    take part in the parent stacking context [= current stacking
    context].

The "positioned elements" in the second half aren't the same as 
the "positioned elements" in the first half. The "parent stacking 
context" is actually the current stacking context. The painting order 
is defined as that of a stacking context with exceptions, which means 
you have to look up the normal stacking context and then apply the 
exceptions. And the paragraph refers to types of elements that only 
exist in level 3, viz., non-positioned elements that create a stacking 
context.

Here is attempt to replace the "as if," but I do not suggest using this 
text, because I may have overlooked some subtlety:

    Positioned elements with 'z-index: auto' (in layer 6), floats
    (layer 4), inline blocks (layer 5) and inline tables (layer 5)
    have sub-layers, as follows:
    
       a. the background and borders of the element.
       b. the in-flow, non-inline-level, non-positioned descendants.
       c. the floating descendants.
       d. the in-flow, inline-level, non-positioned descendants,
          including inline tables and inline blocks.
    
    This overrides the painting order above, in the sense that
    non-positioned descendants of these elements are painted in
    per-element sub-layers a-d rather than in layers 3-5 of the
    stacking context they belong to. (Note that positioned descendants
    are still painted in layer 6.)

It's safer for now to just try and remove the ambiguities a bit. See 
below.

e) Edit 5 talks about the "descendant stacking context with the most 
negative z-index," where "descendant" actually means "child" (there may 
be descendant stacking contexts that are more negative) and also omits 
that there may be more than one. The original text is better, I think. 
It is not precise, but at least it is clear that it isn't meant to be.

> 1. In section 9.9.1 [2], replace:
>       # For a positioned box, the 'z-index' property specifies:
>       #   1. The stack level of the box in the current stacking
>       #      context.
>       #   2. Whether the box establishes a local stacking context. 
>       #
>       # Values have the following meanings:
>       #    <integer>
>       #       This integer is the stack level of the generated box in
>       #       the current stacking context. The box also establishes
>       #       a local stacking context in which its stack level
>       #       is '0'.
>       #    auto
>       #       The stack level of the generated box in the current
>       #       stacking context is the same as its parent's box. The
>       #       box does not establish a new local stacking context.
> with 
>       # For a positioned box, the 'z-index' property specifies:
>       #   1. The stack level of the box in the current stacking
>       #      context.
>       #   2. Whether the box establishes a stacking context.
>       #
>       # Values have the following meanings:
>       #    <integer>
>       #       This integer is the stack level of the generated box in
>       #       the current stacking context. The box also establishes
>       #       a new stacking context.
>       #    auto
>       #       The stack level of the generated box in the current
>       #       stacking context is '0'. The box does not establish a
>       #       new stacking context unless it is the root element.

OK.

>
> 2. In section 9.9.1 [2], replace:
>       # Each box in a given stacking context has an integer stack
>       # level, which is its position on the z-axis relative to other
>       # boxes in the same stacking context.
>    with
>       # Each positioned box in a given stacking context has an
>       # integer stack level, which is its position on the z-axis
>       # relative other stack levels within the same stacking context.

OK.

>
> 3. In section 9.9.1 [2], replace:
>        # Each stacking context consists of the following stacking
>        # levels
>        # (from back to front):  
>              # 1.the background and borders of the element forming
>              #   the stacking context. 
>              # 2.the stacking contexts of descendants with negative
>              #   stack levels. 
>              # 3.a stacking level containing in-flow non-inline-level
>              #   non-positioned descendants.
>              # 4.a stacking level for non-positioned floats and their
>              #   contents.
>              # 5.a stacking level for in-flow inline-level
>              #   non-positioned descendants. 
>              # 6.a stacking level for positioned descendants with
>              #   'z-index: auto', and any descendant stacking
>              #   contexts with 'z-index: 0'.
>              # 7.the stacking contexts of descendants with positive
>              #   stack levels.
>        # For a more thorough explanation of the stacking order,
>        # please see Appendix E.
>    with
>        # Within each stacking context, the following layers are
>        # painted in back-to-front order:
>              # 1.the background and borders of the element forming
>              #   the stacking context.
>              # 2.the stacking contexts of descendants with negative
>              #   stack levels (most negative first).
>              # 3.in-flow non-inline-level non-positioned descendants.
>              # 4.non-positioned floats.
>              # 5.in-flow inline-level non-positioned descendants,
>              #   including inline tables and inline blocks.
>              # 6.positioned descendants and stacking contexts with
>              #   stack level '0'.
>              # 7.the stacking contexts of descendants with positive
>              #   stack levels (least positive first).
>        # This painting order is applied recursively to each stacking
>        # context. This description of stacking context painting order
>        # constitutes an overview of the detailed normative definition
>        # in Appendix E.

I suggest:

    # Within each stacking context, the following layers are painted in
    # back-to-front order.
    #
    #   1. the background and borders of the element forming the
    #      stacking context.
    #   2. the child stacking contexts with negative stack levels (most
    #      negative first).
    #   3. the in-flow, non-inline-level, non-positioned descendants.
    #   4. the floating descendants.
    #   5. the in-flow, inline-level, non-positioned descendants,
    #      including inline tables and inline blocks.
    #   6. the stacking contexts with stack level 0, and the positioned
    #      descendants with 'z-index: auto'.
    #   7. the child stacking contexts with positive stack levels (least
    #      positive first).
    #
    # This painting order is applied recursively to each stacking
    # context. This description of stacking context painting order
    # constitutes an overview of the detailed normative definition in
    # Appendix E.

> 4. In section 9.9.1 [2], replace:
>       # The contents of inline blocks and inline tables are stacked
>       # as if they generated new stacking contexts, except that any
>       # positioned elements and any elements that actually create new
>       # stacking contexts take part in the parent stacking context.
>       # They are then painted atomically in the inline stacking 
>       # level. 
>    with
>       # The contents of positioned elements with 'z-index: auto',
>       # non-positioned floats, inline blocks and inline tables are
>       # stacked as if they generated new stacking contexts, except
>       # that any positioned elements and any elements that actually
>       # create new stacking contexts take part in the parent stacking
>       # context.

I suggest:

    # Positioned elements with 'z-index: auto' (in layer 6), floats
    # (layer 4), inline blocks (layer 5), and inline tables (layer 5),
    # are painted as if those elements generated new stacking contexts,
    # except that their positioned descendants and any child stacking
    # contexts take part in the current stacking context.

I'd also put it immediately after the 1-7 layer list, i.e., before the 
paragraph that says that the details are in appendix E.

>
> 5. In Appendix E, E.2 [3], replace:
>       # The stacking context background and most negative positioned
>       # stacking contexts are at the bottom of the stack, while the
>       # most positive positioned stacking contexts are at the top of
>       # the stack. 
>   with:
>       # The stacking context's background is at the bottom of the
>       # stack, immediately below its descendant stacking context with
>       # the most negative z-index. The descendant stacking context
>       # with the highest positive z-index is at the top of the stack.
>       # The stack level of all the other elements in the stacking
>       # context is then resolved at rendering time using the painting
>       # order below.

I prefer the original.

>
> 6. In Appendix E, E.2 [3], replace:
>       # The stacking order for an element generating a stacking
>       # context...
>    with: 
>       # The painting order for the descendants of an element
>       # generating a stacking context...

OK.

> [1] http://wiki.csswg.org/spec/css2.1#issue-60
> [2] http://www.w3.org/TR/CSS21/visuren.html#z-index
> [3] http://www.w3.org/TR/CSS21/zindex.html



Bert
-- 
  Bert Bos                                ( W 3 C ) http://www.w3.org/
  http://www.w3.org/people/bos                               W3C/ERCIM
  bert@w3.org                             2004 Rt des Lucioles / BP 93
  +33 (0)4 92 38 76 92            06902 Sophia Antipolis Cedex, France
Received on Wednesday, 7 July 2010 12:30:12 GMT

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