[css2] Updated z-index text and example

ianbjacobs · ianbjacobs · commit da38759116ab · 1998-03-21T23:47:19.000Z
--HG--
extra : convert_revision : svn%3A73dc7c4b-06e6-40f3-b4f7-9ed1dbc14bfc/trunk%401321
diff --git a/css2/visuren.src b/css2/visuren.src
@@ -1,6 +1,6 @@
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 <html lang="en">
-<!-- $Id: visuren.src,v 2.34 1998-03-21 21:23:08 ijacobs Exp $ -->
+<!-- $Id: visuren.src,v 2.35 1998-03-21 23:47:19 ijacobs Exp $ -->
 <HEAD>
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
 <TITLE>Visual rendering model</TITLE>
@@ -1092,8 +1092,8 @@ with respect to a <A HREF="#containing-block">containing block</A>.
 It also establishes a new containing block for descendant boxes.
 However, the contents of an absolutely positioned element do not flow
 around any other boxes. They may or may not obscure the contents of
-another box, depending on the <a href="#z-order">z-order</a> of the
-overlapping boxes.
+another box, depending on the <a href="#stack-level">stack levels</a>
+of the overlapping boxes.
 
 <H3><a name="fixed-positioning">Fixed positioning</a></H3>
 
@@ -1472,54 +1472,48 @@ word.&lt;/P&gt;
 
 <!-- How do you put the hyphens in the RIGHT margin? BB -->
 
-<H2><a name="z-order">Z-order</a>: Layered presentation</H2>
+<H2>Layered presentation</H2>
 <P><em>In the following sections, the expression "in front of" 
 means closer to the user as the user faces the screen.</em></P>
 
-<P>CSS2 allows authors to specify the position of a box along three
-axes. In addition to their horizontal and vertical positions, boxes
-lie along a "z-axis" and are rendered one on top of the other.  Z-axis
-positions are particularly relevant when boxes overlap visually.
-
-<P>Each box belongs to a <span class="index-def" title="stacking
-context"><dfn>stacking context</dfn></span>. Each box in a stacking
-context has an integer <span class="index-def" title="stack
-level"><dfn>stack level</dfn></span>. The stack level refers to its
-position on the z-axis with respect to other boxes in the stacking
-context.
-
-<P>There is one <span class="index-def" title="global stacking
-context"><dfn>global stacking context</dfn></span> to which all boxes
-belong by default. In this stacking context, the root element of the
-document tree generates a box with stack level '0', but other boxes
-may have negative stack levels and will be rendered behind the root
-element's box.  Boxes with greater stack levels are always rendered in
-front of boxes with lower stack levels.
-
-<P>An element may establish a <span class="index-def" title="local
-stacking context"><dfn>local stacking context</dfn></span> that is
-inherited by its descendants (unless overridden).  The box that
-establishes the local stacking context has a stack level of '0' in
-that context. However, the entire local stacking context has an
-independent stack level within the surrounding stacking context.  A
-local stacking context is atomic; boxes in other stacking contexts may
-not come between any of its boxes.
-
-<P>The stack level of an element may be determined in two ways:</P>
-
-<ul>
-<li>Implicitly, by virtue of the element's position in the <a
-href="conform.html#doctree">document tree</a>.
-Boxes are stacked in the order their
-source elements appear in the document tree: later boxes are
-stacked in front of earlier boxes.
-<li>Explicitly, via the <span
-class="propinst-z-index">'z-index'</span> property. 
-</ul>
-
-<!-- How do normal flow boxes stack? -IJ -->
-
-<H3><a name="stack-level">Specifying the stack level</a>: the <span
+<P>In CSS2, each box has a position in three dimensions. In addition
+to their horizontal and vertical positions, boxes lie along a "z-axis"
+and are rendered one on top of the other.  Z-axis positions are
+particularly relevant when boxes overlap visually. This section
+discusses how boxes may be positioned along the z-axis in CSS2.
+
+
+<P>Each box belongs to one <span class="index-def" title="stacking
+context"><dfn>stacking context</dfn></span>. Each box in a given
+stacking context has an integer <span class="index-def" title="stack
+level"><a name="stack-level"><dfn>stack level</dfn></a></span>, which
+is its position on the z-axis relative to other boxes in the same
+stacking context.  Boxes with greater stack levels are always rendered
+in front of boxes with lower stack levels.  Boxes may have negative
+stack levels.  Boxes with the same stack level in a stacking context
+are stacked bottom-to-top according to document tree order.
+
+<!-- Say depth-first traversal? -IJ --> 
+
+<P>The <a href="conform.html#root">root</a> element creates a <span
+class="index-def" title="root stacking context"><dfn>root stacking
+context</dfn></span>, but other elements may establish <span
+class="index-def" title="local stacking context"><dfn>local stacking
+contexts</dfn></span>. Stacking contexts are inherited. A local
+stacking context is atomic; boxes in other stacking contexts may not
+come between any of its boxes.
+
+<P>An element that establishes a local stacking context generates a
+box that has two stack levels: one for the stacking context it creates
+(always '0') and one for the stacking context to which it belongs
+(given by the <span class="propinst-z-index">'z-index'</span>
+property).
+
+<P>An element's box has the same stack level as its parent's box
+unless given a different stack level with the <span
+class="propinst-z-index">'z-index'</span> property.
+
+<H3><a name="z-index">Specifying the stack level</a>: the <span
 class="propinst-z-index">'z-index'</span> property</H3> 
 
 <!-- #include src=properties/z-index.srb -->
@@ -1529,54 +1523,38 @@ class="propinst-z-index">'z-index'</span> property specifies:
 
 <ol>
 <li>The stack level of the box in the current stacking context.
-<li>Whether the box establishes a new local stacking context.
+<li>Whether the box establishes a local stacking context.
 </ol>
 
 <P>Values have the following meanings:</p>
 
 <dl>
-<dt><strong>auto</strong>
-<dd>The stack level of the generated box in the current stacking context
-is given by the element's position in the document tree. The
-box does not establish a new local stacking context.
 <dt><span class="index-inst" title="&lt;integer&gt;"><span
 class="value-inst-integer"><strong>&lt;integer&gt;</strong></span></span>
-<dd>This value is the stack level of the generated box
+<dd>This integer is the stack level of the generated box
 in the current stacking context. The box 
-also establishes a new local stacking context.
+also establishes a local stacking context in which its stack
+level is '0'.
+<dt><strong>auto</strong>
+<dd>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.
 </dl>
 
-<P>The integer value of this property has the following meaning:</p>
-
-<ul>
-    <li>Sibling boxes are stacked back-to-front in order of increasing
-    <span class="propinst-z-index">'z-index'</span> value. When two
-    siblings have the same <span
-    class="propinst-z-index">'z-index'</span> value, the later sibling
-    <!-- and its descendants -IJ --> generates boxes in front of those
-    generated by the earlier sibling.
-
-    <li>Elements with negative <span
-    class="propinst-z-index">'z-index'</span> values generate boxes
-    behind level 0 boxes in the current stacking context. Elements with
-    positive <span class="propinst-z-index">'z-index'</span> values
-    generate boxes in front of level 0 boxes in the current stacking context.
-</ul>
-
-<p>The relative z-order of two elements that are neither siblings
-nor parent/child can be determined by evaluation of the previous
-rules for both elements' ancestors. </p>
-
 <div class="html-example"><P>
-<P>In the following example, the order of the elements, listed
-back-to-front is: "image", "text2", and "text1".
+<P>In the following example, the stack levels of
+the boxes (named with their "id" attributes) are:
+"text2"=0, "image"=1, "text3"=2, and "text1"=3. The
+"text2" stack level is inherited from the root box. The
+others are specified with the <span
+class="propinst-z-index">'z-index'</span> property.
 
 <pre>
 &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt;
 &lt;HTML&gt;
   &lt;HEAD&gt;
     &lt;TITLE&gt;Z-order positioning&lt;/TITLE&gt;
-    &lt;STYLE type=&quot;text/css&quot;&gt;
+    &lt;STYLE type="text/css"&gt;
       .pile { 
         position: absolute; 
         left: 2in; 
@@ -1588,17 +1566,21 @@ back-to-front is: "image", "text2", and "text1".
   &lt;/HEAD&gt;
   &lt;BODY&gt;
     &lt;P&gt;
-      &lt;IMG alt="A butterfly image"
-      src=&quot;butterfly.gif&quot; 
-      class=&quot;pile&quot; 
-      id=&quot;image&quot; 
-      style=&quot;z-index: 1&quot;&gt;
+      &lt;IMG id="image" class="pile" 
+           src="butterfly.gif" alt="A butterfly image"
+           style="z-index: 1"&gt;
 
-    &lt;DIV class=&quot;pile&quot; id=&quot;text1&quot; style=&quot;z-index: 3&quot;&gt;
+    &lt;DIV id="text1" class="pile" 
+         style="z-index: 3"&gt;
       This text will overlay the butterfly image.
     &lt;/DIV&gt;
 
-    &lt;DIV class=&quot;pile&quot; id=&quot;text2&quot; style=&quot;z-index: 2&quot;&gt;
+    &lt;DIV id="text2"&gt;
+      This text will be beneath everything.
+    &lt;/DIV&gt;
+
+    &lt;DIV id="text3" class="pile" 
+         style="z-index: 2"&gt;
       This text will underlay text1, but overlay the butterfly image
     &lt;/DIV&gt;
   &lt;/BODY&gt;
