- From: Arron Eicholz via cvs-syncmail <cvsmail@w3.org>
- Date: Wed, 09 Nov 2011 22:59:07 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-positioning
In directory hutz:/tmp/cvs-serv23137
Modified Files:
Overview.html Overview.src.html
Log Message:
Updating page positioning to handle non-paged media
added more clarificaiton for center positioning
cleaned up links
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-positioning/Overview.html,v
retrieving revision 1.9
retrieving revision 1.10
diff -u -d -r1.9 -r1.10
--- Overview.html 7 Nov 2011 16:47:25 -0000 1.9
+++ Overview.html 9 Nov 2011 22:59:05 -0000 1.10
@@ -9,8 +9,6 @@
<link href=default.css rel=stylesheet type="text/css">
<link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet
type="text/css">
- <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet
- type="text/css">
<style type="text/css">
.cb-example-table
@@ -60,16 +58,19 @@
<h1>CSS Positioned Layout Module Level 3</h1>
[...1077 lines suppressed...]
href="#ltlengthgt"
- title="'top', ''<length>''"><strong>6.6.</strong></a>
+ title="'top', ''<length>''"><strong>6.7.</strong></a>
<li>‘<code class=css><percentage></code>’, <a
href="#ltpercentagegt"
- title="'top', ''<percentage>''"><strong>6.6.</strong></a>
+ title="'top', ''<percentage>''"><strong>6.7.</strong></a>
</ul>
<li>viewport, <a href="#viewport0" title=viewport><strong>2.</strong></a>
@@ -4081,7 +4294,7 @@
<tr>
<th><a class=property href="#position">position</a>
- <td>static | relative | absolute | center | fixed
+ <td>static | relative | absolute | center | page | fixed
<td>static
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-positioning/Overview.src.html,v
retrieving revision 1.10
retrieving revision 1.11
diff -u -d -r1.10 -r1.11
--- Overview.src.html 7 Nov 2011 16:47:25 -0000 1.10
+++ Overview.src.html 9 Nov 2011 22:59:05 -0000 1.11
@@ -55,8 +55,8 @@
<dl>
<dt>This version:</dt>
<dd><a href="[VERSION]">http://dev.w3.org/csswg/css3-positioning/</a></dd>
- <!--<dt>Latest version:</dt>
- <dd><a href="http://www.w3.org/TR/[SHORTNAME]/">http://www.w3.org/TR/[SHORTNAME]/</a></dd>-->
+ <dt>Latest version:</dt>
+ <dd><a href="http://www.w3.org/TR/[SHORTNAME]/">http://www.w3.org/TR/[SHORTNAME]/</a></dd>
<dt>Editor's draft:
<dd><a href="http://dev.w3.org/csswg/[SHORTNAME]/">http://dev.w3.org/csswg/[SHORTNAME]/</a></dd>
<dt>Previous version:</dt>
@@ -64,7 +64,7 @@
<dt>Editors:</dt>
<dd class="vcard"><span class="fn">Arron Eicholz</span>, <span class="org">Microsoft Corporation</span>
<dt>Issues List</dt>
- <dd><a href="http://wiki.csswg.org/spec/[SHORTNAME]">http://wiki.csswg.org/spec/[SHORTNAME]</a></dd>
+ <dd><a href="http://wiki.csswg.org/spec/[SHORTNAME]/">http://wiki.csswg.org/spec/[SHORTNAME]/</a></dd>
</dl>
<!--copyright-->
<hr title="Separator for header">
@@ -183,7 +183,7 @@
The position and size of an element's box(es) are sometimes computed relative to a
certain rectangle, called the containing block of the element. The containing block of a
''static'' or ''relative'' element is defined in the Box Model [[!CSS3BOX]]; for
- ''fixed'', ''absolute'' and ''center'', it is defined as follows:
+ ''fixed'', ''absolute'', ''center'' and ''page'', it is defined as follows:
</p>
<ol>
<li>
@@ -232,10 +232,21 @@
by the padding edge of the ancestor.
</li>
<li>
-
+ In the case that the ancestor is inline-level, the containing block depends
+ on the content edges of the boxes generated by the ancestor. The top most,
+ right most, bottom most and left most content edges of all the boxes
+ generated by the ancestor determine the edges for the containing block.
</li>
</ol>
</li>
+ <li>
+ If the element has <span title="'position'!!''page''">'position: page'</span> and
+ the element is within paged media or within a rerion, the containing block is the
+ <span>initial containing block</span>. This is the <span>viewport</span> or the page
+ area when in paged media. In the case of CSS Regions [[!CSS3-REGIONS]] this is the
+ individual region. When a page positioned element is not in paged media or a region
+ the containing block is determined per the absolute positioning model.
+ </li>
<li>If there is no such ancestor, the containing block is the <span>initial containing block</span>.</li>
</ol>
<p>
@@ -446,7 +457,7 @@
In the absolute positioning model, a box is explicitly offset with respect to its
<span>containing block</span>. It is removed from the <span>normal flow</span> entirely (it has no impact on later
siblings). An absolutely positioned box establishes a new <span>containing block</span> for normal
- flow children and absolutely (but not fixed) positioned descendants. However, the
+ flow children and absolutely (but not fixed or page) positioned descendants. However, the
contents of an absolutely positioned element do not flow around any other boxes. They
may obscure the contents of another box (or be obscured themselves), depending on the
stack levels of the overlapping boxes.
@@ -462,7 +473,7 @@
In the center positioning model, a box is explicitly centered with respect to its
<span>containing block</span>. It is removed from the <span>normal flow</span> entirely (it has no impact on later
siblings). A center positioned box establishes a new <span>containing block</span> for <span>normal
- flow</span> children and absolutely (but not fixed) positioned descendants. However, the
+ flow</span> children and absolutely (but not fixed or page) positioned descendants. However, the
contents of an center positioned element do not flow around any other boxes. They
may obscure the contents of another box (or be obscured themselves), depending on the
stack levels of the overlapping boxes.
@@ -471,7 +482,30 @@
References in this specification to an <span class="index-def" title="center positioned element/box">center positioned element</span> (or its box)
imply that the element's 'position' property has the value <span title="'position'!!''center''">''center''</span>.
</p>
- <!-- End section: Absolute positioning -->
+ <!-- End section: Center positioning -->
+
+ <h3 id="page-positioning"><span class="index-def" title="page positioning|page position|page positioned">Page positioning</span></h3>
+ <p>
+ In the page positioning model, a box is explicitly offset with respect to its
+ <span>containing block</span>. It is removed from the <span>normal flow</span> entirely
+ (it has no impact on later siblings). A page positioned box establishes a new
+ <span>containing block</span> for <span>normal flow</span> children and absolutely (but
+ not fixed or other page) positioned descendants. However, the contents of a page
+ positioned element do not flow around any other boxes. They may obscure the contents of
+ another box (or be obscured themselves), depending on the stack levels of the
+ overlapping boxes.
+ </p>
+ <p>
+ For <a href="http://www.w3.org/TR/CSS2/page.html">paged media</a>, boxes with page
+ positions are only generated on the initial page where the page position element exists.
+ Boxes with page position that are larger than the page area are clipped and the
+ remaining part of the box is placed on the following page.
+ </p>
+ <p>
+ References in this specification to a <span class="index-def" title="page positioned element/box">page positioned element</span> (or its box) imply
+ that the element's 'position' property has the value <span title="'position'!!''page''">''page''</span>.
+ </p>
+ <!-- End section: Page positioning -->
<h3 id="fixed-positioning"><span class="index-def" title="fixed positioning|fixed position|fixed positioned">Fixed positioning</span></h3>
<p>
@@ -493,7 +527,7 @@
<div class="figure">
<p>
<img src="images/frame.png" alt="Example of frame layout">
- <span class="dlink"> <a id="img-frame" href="images/longdesc/frame-desc.html" title="Long description for frame layout example">[D]</a></span>
+ <span class="dlink"><a id="img-frame" href="images/longdesc/frame-desc.html" title="Long description for frame layout example">[D]</a></span>
<span class="slink"> <a id="source-frame" href="source/frame-src.html" title="Source code for frame layout example">[S]</a></span>
</p>
</div>
@@ -567,7 +601,7 @@
</tr>
<tr>
<th><a href="#values">Value</a>:</th>
- <td><var>static</var> | <var>relative</var> | <var>absolute</var> | <var>center</var> | <var>fixed</var></td>
+ <td><var>static</var> | <var>relative</var> | <var>absolute</var> | <var>center</var> | <var>page</var> | <var>fixed</var></td>
</tr>
<tr>
<th>Initial:</th>
@@ -599,7 +633,7 @@
</tr>
<tr>
<th>Canonical order:</th>
- <td><abbr title="follows order of property value definition">per grammar<abbr></td>
+ <td><abbr title="follows order of property value definition">per grammar</abbr></td>
</tr>
</table>
<p>The values of this property have the following meanings:</p>
@@ -655,6 +689,31 @@
margins do not <a href="http://www.w3.org/TR/CSS2/box.html#collapsing-margins">collapse</a>
with any other margins.
</dd>
+ <dt><dfn title="'position'!!''page''">page</dfn></dt>
+ <dd>
+ <p>The box's position is calculated according to the "absolute" model.</p>
+ <ul>
+ <li>
+ In the case of paged media or when inside a region box the box's
+ <span>containing block</span> is always the <span>initial containing block</span>.
+ </li>
+ <li>
+ Otherwise, the <span>containing block</span> is determined per the
+ "absolute" model.
+ </li>
+ </ul>
+ <p>
+ As with the "absolute" model, the box's margins do not collapse with any
+ other margins. In the case of the print media type, the box is rendered only on
+ the initial page or region where the page positioned element originated. User
+ agents may paginate the content of paged boxes.
+ </p>
+ <p class="note">
+ Note, that CSS Regions are also <span title="initial containing block">initial containing blocks</span>, in accordance with
+ <a href="http://dev.w3.org/csswg/css3-regions/Overview.html#flow-into">'flow-into'</a> property
+ of the CSS Regions Module [[!CSS3-REGIONS]].
+ </p>
+ </dd>
<dt><dfn title="'position'!!''fixed''">fixed</dfn></dt>
<dd>
The box's position is calculated according to the "absolute" model, but in addition,
@@ -704,7 +763,7 @@
</tr>
<tr>
<th><a href="#values">Value</a>:</th>
- <td><var>auto</var> | <var>parent</var> | <var>container</var> | <var>root</var> | <var>nth-parent()</var> | <var>element()</var></td>
+ <td><var>auto</var> | <var>parent(<number>)</var> | <var>container</var> | <var>root</var> | <var>element()</var></td>
</tr>
<tr>
<th>Initial:</th>
@@ -736,7 +795,7 @@
</tr>
<tr>
<th>Canonical order:</th>
- <td><abbr title="follows order of property value definition">per grammar<abbr></td>
+ <td><abbr title="follows order of property value definition">per grammar</abbr></td>
</tr>
</table>
<p>The values of this property have the following meanings:</p>
@@ -745,7 +804,7 @@
<dd>
</dd>
- <dt><dfn title="'position-reference'!!''parent''">parent</dfn></dt>
+ <dt><dfn title="'position-reference'!!''parent''">parent(<number>)</dfn></dt>
<dd>
Use the parent element as the <span>containing block</span> for the positioned element.
</dd>
@@ -833,17 +892,24 @@
</tr>
<tr>
<th>Canonical order:</th>
- <td><abbr title="follows order of property value definition">per grammar<abbr></td>
+ <td><abbr title="follows order of property value definition">per grammar</abbr></td>
</tr>
</table>
<p>
- This property specifies how far an absolutely positioned box's top margin edge is offset
- below the top edge of the box's <span>containing block</span>. For relatively positioned boxes, the
- offset is with respect to the top edges of the box itself (i.e., the box is given a
- position in the <span>normal flow</span>, and then offset from that position according to these
- properties). For absolutely positioned and center positioned elements whose containing
- block is based on a block-level element, these properties are an offset from the padding
- edge of that element.
+ This property specifies how far an absolutely positioned box's top margin edge is
+ offset below the top edge of the box's <span>containing block</span>.
+
+ For relatively positioned boxes, the offset is with respect to the top edges of the box
+ itself (i.e., the box is given a position in the <span>normal flow</span>, and then
+ offset from that position according to these properties).
+
+ For absolutely positioned and center positioned elements whose containing block is based
+ on a block-level element, these properties are an offset from the padding edge of that
+ element.
+
+ For page positioned boxes, within paged media or regions, the offset is with respect to
+ the top edge of the <span>initial containing block</span>; otherwise for page positioned
+ boxes same as for absolutely positioned boxes.
</p>
<table id="propdef-right" class="propdef">
<tr>
@@ -888,15 +954,24 @@
</tr>
<tr>
<th>Canonical order:</th>
- <td><abbr title="follows order of property value definition">per grammar<abbr></td>
+ <td><abbr title="follows order of property value definition">per grammar</abbr></td>
</tr>
</table>
<p>
- Like 'top', but specifies how far a box's right margin edge is offset to the left of the
- right edge of the box's <span>containing block</span>. For relatively positioned boxes, the offset is
- with respect to the right edge of the box itself. For absolutely
- positioned and center positioned elements whose <span>containing block</span> is based on a block-level element, these
- properties are an offset from the padding edge of that element.
+ Like 'top', but specifies how far a box's right margin edge is offset to the left of
+ the right edge of the box's <span>containing block</span>.
+
+ For relatively positioned boxes, the offset is with respect to the right edge of the box
+ itself (i.e., the box is given a position in the <span>normal flow</span>, and then
+ offset from that position according to these properties).
+
+ For absolutely positioned and center positioned elements whose containing block is based
+ on a block-level element, these properties are an offset from the padding edge of that
+ element.
+
+ For page positioned boxes, within paged media or regions, the offset is with respect to
+ the right edge of the <span>initial containing block</span>; otherwise for page positioned
+ boxes same as for absolutely positioned boxes.
</p>
<table id="propdef-bottom" class="propdef">
<tr>
@@ -941,15 +1016,24 @@
</tr>
<tr>
<th>Canonical order:</th>
- <td><abbr title="follows order of property value definition">per grammar<abbr></td>
+ <td><abbr title="follows order of property value definition">per grammar</abbr></td>
</tr>
</table>
<p>
- Like 'top', but specifies how far a box's bottom margin edge is offset above the bottom
- of the box's <span>containing block</span>. For relatively positioned boxes, the offset is with
- respect to the bottom edge of the box itself. For absolutely
- positioned and center positioned elements whose <span>containing block</span> is based on a block-level element, these
- properties are an offset from the padding edge of that element.
+ Like 'top', but specifies how far a box's bottom margin edge is offset above the
+ bottom edge of the box's <span>containing block</span>.
+
+ For relatively positioned boxes, the offset is with respect to the bottom edge of the
+ box itself (i.e., the box is given a position in the <span>normal flow</span>, and then
+ offset from that position according to these properties).
+
+ For absolutely positioned and center positioned elements whose containing block is based
+ on a block-level element, these properties are an offset from the padding edge of that
+ element.
+
+ For page positioned boxes, within paged media or regions, the offset is with respect to
+ the bottom edge of the <span>initial containing block</span>; otherwise for page positioned
+ boxes same as for absolutely positioned boxes.
</p>
<table id="propdef-left" class="propdef">
<tr>
@@ -994,15 +1078,24 @@
</tr>
<tr>
<th>Canonical order:</th>
- <td><abbr title="follows order of property value definition">per grammar<abbr></td>
+ <td><abbr title="follows order of property value definition">per grammar</abbr></td>
</tr>
</table>
<p>
- Like 'top', but specifies how far a box's left margin edge is offset to the right of the
- left edge of the box's <span>containing block</span>. For relatively positioned boxes, the offset is
- with respect to the left edge of the box itself. For absolutely
- positioned and center positioned elements whose <span>containing block</span> is based on a block-level element, these
- properties are an offset from the padding edge of that element.
+ Like 'top', but specifies how far a box's left margin edge is offset to the right of
+ the left edge of the box's <span>containing block</span>.
+
+ For relatively positioned boxes, the offset is with respect to the left edge of the box
+ itself (i.e., the box is given a position in the <span>normal flow</span>, and then
+ offset from that position according to these properties).
+
+ For absolutely positioned and center positioned elements whose containing block is based
+ on a block-level element, these properties are an offset from the padding edge of that
+ element.
+
+ For page positioned boxes, within paged media or regions, the offset is with respect to
+ the left edge of the <span>initial containing block</span>; otherwise for page positioned
+ boxes same as for absolutely positioned boxes.
</p>
<p>The values for the four properties have the following meanings:</p>
<dl>
@@ -1024,14 +1117,16 @@
</dd>
</dl>
<p class="note">
- Note, for fixed positioned elements using large values or negative values may easily move elements
- outside the <span>viewport</span> and make the contents unreachable through scrolling or other means.
- Authors should be aware that fixed position elements are always relative to the <span>initial containing block</span>.
+ Note, for page positioned elements and fixed positioned elements using large values or
+ negative values may easily move elements outside the <span>viewport</span> and make the
+ contents unreachable through scrolling or other means. Authors should be aware that
+ page postion and fixed position elements are always relative to the <span>initial
+ containing block</span>.
</p>
<!-- End section: Box offsets: 'top', 'right', 'bottom', 'left' -->
<h2 id="size-and-position-details">Sizing and positioning details</h2>
- <h3 id="width-of-absolute-non-replaced-elements">The width of absolute or fixed positioned, non-replaced elements</h3>
+ <h3 id="width-of-absolute-non-replaced-elements">The width of absolute, page or fixed positioned, non-replaced elements</h3>
<p>The constraint that determines the used values for these elements is:</p>
<p>
<code>
@@ -1080,7 +1175,7 @@
<li>If 'width' is ''auto'', 'left' and 'right' are not ''auto'', then solve for 'width'</li>
<li>If 'right' is ''auto'', 'left' and 'width' are not ''auto'', then solve for 'right'</li>
</ol>
- <!-- End section: The width of absolute or fixed positioned, non-replaced element -->
+ <!-- End section: The width of absolute, page or fixed positioned, non-replaced element -->
<h3 id="width-of-center-positioned-non-replaced-elements">The width of a center positioned, non-replaced elements</h3>
<p>The following constraints must hold among the used values of the other properties:</p>
@@ -1110,17 +1205,14 @@
If there is exactly one value specified as ''auto'', its used value follows from the
equality.
</p>
- <p>
- If 'width' is set to ''auto'', any other ''auto'' values become ''0'' and 'width'
- follows from the resulting equality.
- </p>
+ <p>If 'width' is set to ''auto'', then the width is shrink-to-fit.</p>
<p>
If both 'left' and 'right' are ''auto'', their used values are equal. This horizontally
centers the element with respect to the edges of the <span>containing block</span>.
</p>
<!-- End section: The width of a center positioned, non-replaced element -->
- <h3 id="width-of-absolute-replaced-elements">The width of absolute or fixed positioned, replaced elements</h3>
+ <h3 id="width-of-absolute-replaced-elements">The width of absolute, page or fixed positioned, replaced elements</h3>
<p>
If 'height' and 'width' both have computed values of ''auto'' and the element also has an
intrinsic width, then that intrinsic width is the used value of 'width'.
@@ -1182,11 +1274,11 @@
case 'direction' is ''ltr'') and solve for that value.
</li>
</ol>
- <!-- End section: The width of absolute or fixed positioned, replaced element -->
+ <!-- End section: The width of absolute, page or fixed positioned, replaced element -->
<h3 id="width-of-center-replaced-elements">The width of a center positioned, replaced elements</h3>
<p>
- The used value for 'width' is determined as for "<a href="#width-of-absolute-replaced-elements">The width of absolute or fixed
+ The used value for 'width' is determined as for "<a href="#width-of-absolute-replaced-elements">The width of absolute, page or fixed
positioned, replaced elements</a>".
</p>
<p>
@@ -1196,7 +1288,7 @@
<!-- End section: The width of a center positioned, replaced element -->
- <h3 id="height-of-absolute-non-replaced-elements">The height of absolute or fixed positioned, non-replaced elements</h3>
+ <h3 id="height-of-absolute-non-replaced-elements">The height of absolute, page or fixed positioned, non-replaced elements</h3>
<p>
For absolutely positioned elements, the used values of the vertical dimensions must
satisfy this constraint:
@@ -1248,7 +1340,7 @@
'margin-top' and 'margin-bottom' to ''0'' and solve for 'bottom'.
</li>
</ol>
- <!-- End section: The height of absolute or fixed positioned, non-replaced element -->
+ <!-- End section: The height of absolute, page or fixed positioned, non-replaced element -->
<h3 id="height-of-center-non-replaced-elements">The height of a center positioned, non-replaced elements</h3>
<p>The following constraints must hold among the used values of the other properties:</p>
@@ -1276,8 +1368,8 @@
equality.
</p>
<p>
- If 'height' is set to ''auto'', any other ''auto'' values become ''0'' and 'height'
- follows from the resulting equality.
+ If 'height' is set to ''auto'', then the height is based on the
+ <a href="#root-height">''Auto'' heights for block formatting context roots</a>
</p>
<p>
If both 'top' and 'bottom' are ''auto'', their used values are equal. This vertically
@@ -1285,7 +1377,7 @@
</p>
<!-- End section: The height of a 'center' positioned, non-replaced element -->
- <h3 id="height-of-absolute-replaced-elements">The height of absolute or fixed positioned, replaced elements</h3>
+ <h3 id="height-of-absolute-replaced-elements">The height of absolute, page or fixed positioned, replaced elements</h3>
<p>
If 'height' and 'width' both have computed values of ''auto'' and the element also has an
intrinsic height, then that intrinsic height is the used value of 'height'.
@@ -1325,11 +1417,11 @@
solve for that value.
</li>
</ol>
- <!-- End section: The height of absolute or fixed positioned, replaced element -->
+ <!-- End section: The height of absolute, page or fixed positioned, replaced element -->
<h3 id="height-of-center-replaced-elements">The height of a center positioned, replaced elements</h3>
<p>
- The used value for 'height' is determined as for "<a href="#height-of-absolute-replaced-elements">The height of absolute or fixed
+ The used value for 'height' is determined as for "<a href="#height-of-absolute-replaced-elements">The height of absolute, page or fixed
positioned, replaced elements</a>".
</p>
<p>
@@ -1340,7 +1432,7 @@
<h3 id="auto-height-for-block-formatting-context-roots">'Auto' heights for block formatting context roots</h3>
<p>
- In certain cases (see, e.g., <a href="#height-of-absolute-non-replaced-elements">The height of absolute or fixed positioned, non-replaced element</a> above),
+ In certain cases (see, e.g., <a href="#height-of-absolute-non-replaced-elements">The height of absolute, page or fixed positioned, non-replaced element</a> above),
the height of an element that establishes a block formatting context is computed as follows:
</p>
<p>
@@ -1377,7 +1469,8 @@
case, the element generates no box.
</li>
<li>
- Otherwise, if 'position' has the value <span title="'position'!!''absolute''">''absolute''</span> or <span title="'position'!!''fixed''">''fixed''</span>, and the value
+ Otherwise, if 'position' has the value <span title="'position'!!''absolute''">''absolute''</span>,
+ <span title="'position'!!''page''">''page''</span> or <span title="'position'!!''fixed''">''fixed''</span>, and the value
of 'float' is ''left'' or ''right'', the box is absolutely positioned and the
computed value of 'float' is ''none''. The 'display' is set according to the table
below. Positioning of the box will determined by the 'top', 'right', 'bottom' and
@@ -1664,7 +1757,7 @@
<div class="figure">
<p>
<img src="images/flow-abs-rel.png" alt="Image illustrating the effects of absolutely positioning a box with respect to a containing block.">
- <span class="dlink"> <a id="img-flow-abs-rel" href="images/longdesc/flow-abs-rel-desc.html" title="Long description for example illustrating positioning with respect to a positioned ancestor">[D]</a></span>
+ <span class="dlink"><a id="img-flow-abs-rel" href="images/longdesc/flow-abs-rel-desc.html" title="Long description for example illustrating positioning with respect to a positioned ancestor">[D]</a></span>
</p>
</div>
<p>If we do not position the <em>outer</em> box:</p>
@@ -1707,7 +1800,7 @@
<div class="figure">
<p>
<img src="images/changebar.png" alt="Image illustrating the use of floats to create a changebar effect.">
- <span class="dlink"> <a id="img-changebar" href="http://www.w3.org/TR/CSS2/images/longdesc/changebar-desc.html" title="Long description for change bar example">[D]</a></span>
+ <span class="dlink"> <a id="img-changebar" href="images/longdesc/changebar-desc.html" title="Long description for change bar example">[D]</a></span>
</p>
</div>
<p>
@@ -1721,6 +1814,67 @@
</p>
<!-- End section: Absolute positoining -->
+ <h3 id="page-pos">Page positioning</h3>
+ <p>
+ Finally, we consider the effect of page positioning. Consider the following CSS
+ declarations for <em>outer</em> and <em>inner</em>:
+ </p>
+ <div class="example">
+<pre><code class="css">
+#outer {
+ position: page;
+ top: 200px; left: 200px;
+ width: 200px;
+ color: red;
+}
+#inner { color: blue }
+</code></pre>
+ </div>
+ <p>
+ which cause the top of the <em>outer</em> box to be positioned with respect to its
+ <span>containing block</span>. The <span>containing block</span> for a page positioned box is always established
+ by the <span>initial containing block</span>. The top side of the <em>outer</em> box is ''200px'' below
+ the top of the <span>initial containing block</span> and the left side is ''200px'' from the left side.
+ The child box of <em>outer</em> is flowed normally with respect to its parent.
+ </p>
+ <div class="figure">
+ <p>
+ <img src="images/flow-absolute.png" alt="Image illustrating the effects of page positioning a box.">
+ <span class="dlink"> <a id="img-flow-page" href="images/longdesc/flow-page-desc.html" title="Long description for example illustrating page positioning">[D]</a></span>
+ </p>
+ </div>
+ <p>
+ The following example shows a page positioned box that is a child of a relatively
+ positioned box. Although the parent <em>outer box</em> is setting its 'position'
+ property to <span title="'position'!!''relative''">''relative''</span> this <em>outer box</em> does not serve as the containing
+ block for page positioned descendants. Since the <em>inner</em> box is a page positioned
+ element its <span>containing block</span> is not the <span title="relative positioning">relative positioned</span> <em>outer box</em>, page
+ positioned elements are positioned from the <span>initial containing block</span>, in this case the
+ top and left edges of the illustration itself.
+ </p>
+ <div class="example">
+<pre><code class="css">
+#outer {
+ position: relative;
+ color: red
+}
+#inner {
+ position: page;
+ top: 200px; left: -100px;
+ height: 130px; width: 130px;
+ color: blue;
+}
+</code></pre>
+ </div>
+ <p>This results in something like the following:</p>
+ <div class="figure">
+ <p>
+ <img src="images/flow-static.png" alt="Image illustrating the effects of page positioning a box with respect to the initial containing block.">
+ <span class="dlink"> <a id="img-flow-page2" href="images/longdesc/flow-page-desc2.html" title="Long description illustrating page positioning with respect to the initial containing block.">[D]</a></span>
+ </p>
+ </div>
+ <!-- End section: Page positioning -->
+
<p class="issue">Need to add example for center positioning.</p>
<!-- End section: Comparison of normal flow, floats, and absolute positioning -->
@@ -1772,7 +1926,7 @@
</tr>
<tr>
<th>Canonical order:</th>
- <td><abbr title="follows order of property value definition">per grammar<abbr></td>
+ <td><abbr title="follows order of property value definition">per grammar</abbr></td>
</tr>
</table>
<p>
@@ -1825,7 +1979,7 @@
<div class="figure">
<p>
<img src="images/clip.png" alt="diagram of rect() vs inset()">
- <span class="dlink"> <a id="img-clip" href="longdesc/rect-inset-desc.html" title="Long description illustrating the differences between the rect() and inset() values.">[D]</a></span>
+ <span class="dlink"><a id="img-clip" href="images/longdesc/rect-inset-desc.html" title="Long description illustrating the differences between the rect() and inset() values.">[D]</a></span>
</p>
<p class="caption">Diagram of the rectangles defined by ''rect()'' and ''inset()''.</p>
</div>
@@ -1859,22 +2013,10 @@
clipping regions delimited by the dashed lines in the following illustrations:
</p>
<div class="figure">
- <p><img src="images/clip_002.png" alt="Two clipping regions">
- <span class="dlink"> <a id="img-clip_002" href="http://www.w3.org/TR/CSS2/images/longdesc/clip-desc.html" title="Long description for example of clipping region">[D]</a></span></p>
- </div>
- <p>The following rule:</p>
-<pre><code class="css">
-img { clip: rect(5px, 40px, 45px, 5px); }
-</code></pre>
- <p>
- will create the rectangular clipping region delimited by the dashed line in the
- following illustration:
- </p>
- <div class="figure">
- <p><img src="images/clip2.png" alt="A clipping region">
- <span class="dlink"><a id="img-clip2" href="http://www.w3.org/TR/CSS2/images/longdesc/clip-desc.html" title="Long description for example of clipping region">[D]</a></span>
+ <p>
+ <img src="images/clip_002.png" alt="Two clipping regions">
+ <span class="dlink"><a id="img-clipping" href="images/longdesc/clip-desc.html" title="Long description for example of clipping region">[D]</a></span>
</p>
- <p class="caption">An image of 50 by 55 pixels is clipped with a clipping mask of 35 by 40 pixels.</p>
</div>
</div>
<p class="note">
@@ -1955,7 +2097,7 @@
</tr>
<tr>
<th>Canonical order:</th>
- <td><abbr title="follows order of property value definition">per grammar<abbr></td>
+ <td><abbr title="follows order of property value definition">per grammar</abbr></td>
</tr>
</table>
<p>For a positioned box, the 'z-index' property specifies:</p>
@@ -2050,7 +2192,10 @@
nearest to the user:
</p>
<div class="figure">
- <p><img src="images/stack.png" alt="A stacking context with four layers"></p>
+ <p>
+ <img src="images/stack.png" alt="A stacking context with four layers">
+ <span class="dlink"><a id="img-stack" href="images/longdesc/stack.html" title="Long description for a diagram of a stacking context with four layers">[D]</a></span>
+ </p>
<p class="caption">Schematic diagram of a stacking context with four layers.</p>
</div>
<p>
@@ -2220,13 +2365,13 @@
<li>the replaced content, atomically.</li>
</ol>
</li>
+ <li>Optionally, the outline of the element (see <a href="#stack-order-step-ten">10 below</a>).</li>
</ol>
<p class="note">
Note, some of the boxes may have been generated by line
splitting or the Unicode bidirectional algorithm.
</p>
</li>
- <li>Optionally, the outline of the element (see <a href="#stack-order-step-ten">10 below</a>).</li>
</ol>
</li>
<li>Optionally, if the element is block-level, the outline of the element (see <a href="#stack-order-step-ten">10 below</a>).</li>
@@ -2264,7 +2409,6 @@
this step and not in the steps above.)
</li>
</ol>
- <p class="issue">Need to account for new stacking context creation by opacity and transforms.</p>
<!-- End section: Painting order -->
<h3 id="stacking-notes">Notes</h3>
@@ -2436,8 +2580,9 @@
<h2 class="no-num" id="acknowledgments">Acknowledgments</h2>
<p>
- This spec would not have been possible without input and support from many helpful
- people. Thanks to Bert Bos, Anton Prowse, Rossen Atanassov, Chris Jones, John Jansen.
+ This module would not have been possible without input and support from many helpful
+ people. Thanks to Bert Bos, Tantek Çelik, Anton Prowse, Rossen Atanassov,
+ Chris Jones, John Jansen, Sylvain Galineau.
</p>
<h2 class="no-num" id="references">References</h2>
Received on Wednesday, 9 November 2011 22:59:10 UTC