- From: Arron Eicholz via cvs-syncmail <cvsmail@w3.org>
- Date: Mon, 05 Mar 2012 17:19:56 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-positioning
In directory hutz:/tmp/cvs-serv13562
Modified Files:
Overview.html Overview.src.html
Log Message:
Updating before CVS check-in cut-off
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-positioning/Overview.html,v
retrieving revision 1.12
retrieving revision 1.13
diff -u -d -r1.12 -r1.13
--- Overview.html 3 Feb 2012 21:52:54 -0000 1.12
+++ Overview.html 5 Mar 2012 17:19:54 -0000 1.13
@@ -49,6 +49,54 @@
{
font: inherit;
}
+
+ table.lpr
+ {
+ border-collapse: collapse;
+ }
+ .lpr td, .lpr th
+ {
+ border: 1px solid;
[...1851 lines suppressed...]
+
+ <tr>
+ <th><a class=property href="#offset-start">offset-start</a>
+
+ <td>auto | <length> | <percentage>
+
+ <td>auto
+
+ <td>positioned elements
+
+ <td>no
+
+ <td><length>, <percentage>
+
+ <td>refer to height of containing block
+
+ <tr>
<th><a class=property href="#position">position</a>
<td>static | relative | absolute | center | page | fixed
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-positioning/Overview.src.html,v
retrieving revision 1.14
retrieving revision 1.15
diff -u -d -r1.14 -r1.15
--- Overview.src.html 3 Feb 2012 21:52:54 -0000 1.14
+++ Overview.src.html 5 Mar 2012 17:19:54 -0000 1.15
@@ -45,6 +45,54 @@
{
font: inherit;
}
+
+ table.lpr
+ {
+ border-collapse: collapse;
+ }
+ .lpr td, .lpr th
+ {
+ border: 1px solid;
+ text-align: center;
+ }
+ .lpr col
+ {
+ background: rgb(221, 238, 255);
+ border-right: 2px solid;
+ font-weight: bold;
+ padding: 0 5px;
+ }
+ .lpr div
+ {
+ font-weight: bold;
+ -moz-transform: rotate(-90deg) translatex(-0.5em);
+ -ms-transform: rotate(-90deg) translatex(-0.5em);
+ -o-transform: rotate(-90deg) translatex(-0.5em);
+ -webkit-transform: rotate(-90deg) translatex(-0.5em);
+ transform: rotate(-90deg) translatex(-0.5em);
+ width: 1.5em;
+ }
+ .lpr th:first-child
+ {
+ border: none;
+ background: white;
+ }
+ .lpr tbody td:first-child
+ {
+ font-weight: normal;
+ }
+ .lpr thead td
+ {
+ background: rgb(238, 238, 238);
+ font-weight: bold;
+ padding: 0 5px;
+ vertical-align: bottom;
+ white-space: nowrap;
+ }
+ .lpr thead tr:nth-child(2)
+ {
+ border-bottom: 2px solid;
+ }
</style>
</head>
<body>
@@ -54,17 +102,19 @@
<h2 class="no-num no-toc">[LONGSTATUS] [DATE]</h2>
<dl>
<dt>This version:</dt>
- <dd><a href="[VERSION]">http://dev.w3.org/csswg/css3-positioning/</a></dd>
+ <dd><a href="[VERSION]">[VERSION]</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>
- <dd>None</dd>
- <dt>Editors:</dt>
- <dd class="vcard"><span class="fn">Arron Eicholz</span>, <span class="org">Microsoft Corporation</span>
+ <dd><a href="http://www.w3.org/TR/2012/WD-css3-positioning-20120207/">http://www.w3.org/TR/2012/WD-css3-positioning-20120207/</a></dd>
<dt>Issues List</dt>
<dd><a href="http://wiki.csswg.org/spec/[SHORTNAME]/">http://wiki.csswg.org/spec/[SHORTNAME]/</a></dd>
+ <dt>Discussion:</dt>
+ <dd><a href="http://lists.w3.org/Archives/Public/www-style/">www-style@w3.org</a>with subject line "<kbd>[SHORTNAME] <var>… message topic…</var></kbd>"</dd>
+ <dt>Editors:</dt>
+ <dd class="vcard"><span class="fn">Arron Eicholz</span>, <span class="org">Microsoft Corporation</span>
</dl>
<!--copyright-->
<hr title="Separator for header">
@@ -182,8 +232,12 @@
<p>
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'', ''center'' and ''page'', it is defined as follows:
+ <span title="'position'!!''static''">''static''</span> or
+ <span title="'position'!!''relative''">''relative''</span> element is defined in the
+ Box Model [[!CSS3BOX]]; for <span title="'position'!!''fixed''">''fixed''</span>,
+ <span title="'position'!!''absolute''">''absolute''</span>,
+ <span title="'position'!!''center''">''center''</span> and
+ <span title="'position'!!''page''">''page''</span>, it is defined as follows:
</p>
<ol>
<li>
@@ -753,17 +807,20 @@
</p>
<!-- End section: Choosing a positioning scheme: 'position' property -->
- <!--
- <h3 id="position-root">Choosing a different containing block for positioning: 'position-reference' property</h3>
- <p>The 'position-reference' property determines what element to use as a containing block for the current element.</p>
- <table id="propdef-position-reference" class="propdef">
+ <h3 id="box-offsets-trbl">Box offsets: 'top', 'right', 'bottom', 'left'</h3>
+ <p>
+ An element is said to be <span class="index-def" title="positioned element/box">positioned</span> if its 'position' property has a value
+ other than <span title="'position'!!''static''">''static''</span>. Positioned elements generate positioned boxes, and may be laid out according
+ to the following four physical properties:
+ </p>
+ <table id="propdef-top" class="propdef">
<tr>
<th>Name:</th>
- <td><dfn title="'position-reference'">position-reference</dfn></td>
+ <td><dfn title="'top'">top</dfn></td>
</tr>
<tr>
<th><a href="#values">Value</a>:</th>
- <td><var>auto</var> | <var>parent(<number>)</var> | <var>container</var> | <var>root</var> | <var>element()</var></td>
+ <td><var>auto</var> | <var><length></var> | <var><percentage></var></td>
</tr>
<tr>
<th>Initial:</th>
@@ -779,11 +836,11 @@
</tr>
<tr>
<th>Animatable:</th>
- <td>no</td>
+ <td><length>, <percentage></td>
</tr>
<tr>
<th>Percentages:</th>
- <td>N/A</td>
+ <td>refer to height of <span>containing block</span></td>
</tr>
<tr>
<th>Media:</th>
@@ -791,68 +848,40 @@
</tr>
<tr>
<th>Computed value:</th>
- <td>specified value, but see prose</td>
+ <td>
+ for <span title="'position'!!''relative''">'position: relative'</span>, see <span title="relative positioning">Relative Positioning</span>. For <span title="'position'!!''static''">'position: static'</span>,
+ ''auto''. Otherwise: if specified as a '<length>', the corresponding absolute length;
+ if specified as a '<percentage>', the specified value; otherwise, ''auto''.
+ </td>
</tr>
<tr>
<th>Canonical order:</th>
<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>
- <dl>
- <dt><dfn title="'position-reference'!!''auto''">auto</dfn></dt>
- <dd>
-
- </dd>
- <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>
- <dt><dfn title="'position-reference'!!''container''">container</dfn></dt>
- <dd>
- Use the container as the <span>containing box</span>.<br>
- In the case of multi-column layout the individual column defines the containing
- block even though the individual column is not an actual element "block box". If
- not inside a multi-column element then this value computes to ''auto''.
- </dd>
- <dt><dfn title="'position-reference'!!''root''">root</dfn></dt>
- <dd>
- Use the root element (for HTML and XHTML the html element) as the <span>containing block</span> for the positioned element.
- </dd>
- <dt><dfn title="'position-reference'!!''nth-parent()''">nth-parent()</dfn></dt>
- <dd>
-
- <p class="issue">
- Inserting and removing elements from the tree may cause odd behavior with
- 'nth-parent()'. Is this really a good concept?
- </p>
- </dd>
- <dt><dfn title="'position-reference'!!''element()''">element()</dfn></dt>
- <dd>
-
- <p class="issue">
- Inserting and removing elements from the tree may cause odd behavior with
- 'element()'. Is this really a good concept?
- </p>
- </dd>
- </dl>
- -->
- <p class="issue">
- Ideas have been raised to allow changing the positioning containing block or allowing
- positioning and sizing to use different containing blocks.
+ <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>.
</p>
- <!-- End section: Choosing a different containing block for positioning: 'position-reference' property -->
-
- <h3 id="box-offsets-trbl">Box offsets: 'top', 'right', 'bottom', 'left'</h3>
<p>
- An element is said to be <span class="index-def" title="positioned element/box">positioned</span> if its 'position' property has a value
- other than <span title="'position'!!''static''">''static''</span>. Positioned elements generate positioned boxes, laid out according
- to four properties:
+ For relatively positioned boxes, the offset is with respect to the top 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 this property).
</p>
- <table id="propdef-top" class="propdef">
+ <p>
+ For absolutely positioned and center positioned elements whose <span>containing block</span>
+ is based on a block-level element, this property is an offset from the padding edge of
+ that element.
+ </p>
+ <p>
+ 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>
<th>Name:</th>
- <td><dfn title="'top'">top</dfn></td>
+ <td><dfn title="'right'">right</dfn></td>
</tr>
<tr>
<th><a href="#values">Value</a>:</th>
@@ -896,25 +925,28 @@
</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
+ Similar to '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>.
+ </p>
+ <p>
+ 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.
-
+ offset from that position according to this property).
+ </p>
+ <p>
+ For absolutely positioned and center positioned elements whose <span>containing block</span>
+ is based on a block-level element, this property is an offset from the padding edge of
+ that element.
+ </p>
+ <p>
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.
+ 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-right" class="propdef">
+ <table id="propdef-bottom" class="propdef">
<tr>
<th>Name:</th>
- <td><dfn title="'right'">right</dfn></td>
+ <td><dfn title="'bottom'">bottom</dfn></td>
</tr>
<tr>
<th><a href="#values">Value</a>:</th>
@@ -958,25 +990,28 @@
</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 (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.
-
+ Similar to '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>.
+ </p>
+ <p>
+ 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 this property).
+ </p>
+ <p>
+ For absolutely positioned and center positioned elements whose <span>containing block</span>
+ is based on a block-level element, this property is an offset from the padding edge of
+ that element.
+ </p>
+ <p>
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.
+ 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-bottom" class="propdef">
+ <table id="propdef-left" class="propdef">
<tr>
<th>Name:</th>
- <td><dfn title="'bottom'">bottom</dfn></td>
+ <td><dfn title="'left'">left</dfn></td>
</tr>
<tr>
<th><a href="#values">Value</a>:</th>
@@ -1020,25 +1055,203 @@
</tr>
</table>
<p>
- 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>.
+ Similar to '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>.
+ </p>
+ <p>
+ 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 this property).
+ </p>
+ <p>
+ For absolutely positioned and center positioned elements whose <span>containing block</span>
+ is based on a block-level element, this property is an offset from the padding edge of
+ that element.
+ </p>
+ <p>
+ 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>
+ <dt><dfn class="index-def" title="'top'!!''<length>''|'right'!!''<length>''|'bottom'!!''<length>''|'left'!!''<length>''"><length></dfn></dt>
+ <dd>The offset is a fixed distance from the reference edge. Negative values are allowed.</dd>
+ <dt><dfn class="index-def" title="'top'!!''<percentage>''|'right'!!''<percentage>''|'bottom'!!''<percentage>''|'left'!!''<percentage>''"><percentage></dfn></dt>
+ <dd>
+ The offset is a percentage of the <span title="containing block">containing block's</span> width (for 'left' or 'right')
+ or height (for 'top' and 'bottom'). Negative values are allowed.
+ </dd>
+ <dt><dfn class="index-def" title="'top'!!''auto''|'right'!!''auto''|'bottom'!!''auto''|'left'!!''auto''">auto</dfn></dt>
+ <dd>
+ For non-replaced elements, the effect of this value depends on which of related
+ properties have the value ''auto'' as well. See the sections on the <a href="#abs-non-replaced-width">width</a> and <a href="#abs-non-replaced-height">height</a>
+ of absolutely positioned, non-replaced elements for details. For replaced elements,
+ the effect of this value depends only on the intrinsic dimensions of the replaced
+ content. See the sections on the <a href="#abs-replaced-width">width</a> and <a href="#abs-replaced-height">height</a> of absolutely
+ positioned, replaced elements for details.
+ </dd>
+ </dl>
+ <p class="note">
+ 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' -->
- 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).
+ <h3 id="logical-box-offsets-beaso">Logical box offsets: 'offset-before', 'offset-end', 'offset-after', 'offset-start', and 'offset'</h3>
+ <p>
+ Logical offset properties allow for offseting positioned boxes based on the 'writing-mode'
+ and 'direction' properties. When both the physical property and equivalent logical property
+ (based on 'writing-mode' and 'direction') are specified the physical property computes
+ to the computed value of the coresponding logical property.
+ </p>
+ <p>
+ Positioned elements generate positioned boxes, and may be laid out according to the
+ following four logical properties taking into account the 'writing-mode' and
+ 'direction' of the <span>containing block</span>:
+ </p>
+ <table id="propdef-offset-before" class="propdef">
+ <tr>
+ <th>Name:</th>
+ <td><dfn title="'offset-before'">offset-before</dfn></td>
+ </tr>
+ <tr>
+ <th><a href="#values">Value</a>:</th>
+ <td><var>auto</var> | <var><length></var> | <var><percentage></var></td>
+ </tr>
+ <tr>
+ <th>Initial:</th>
+ <td>auto</td>
+ </tr>
+ <tr>
+ <th>Applies to:</th>
+ <td>positioned elements</td>
+ </tr>
+ <tr>
+ <th>Inherited:</th>
+ <td>no</td>
+ </tr>
+ <tr>
+ <th>Animatable:</th>
+ <td><length>, <percentage></td>
+ </tr>
+ <tr>
+ <th>Percentages:</th>
+ <td>refer to height of <span>containing block</span></td>
+ </tr>
+ <tr>
+ <th>Media:</th>
+ <td>visual</td>
+ </tr>
+ <tr>
+ <th>Computed value:</th>
+ <td>for <span title="'position'!!''relative''">'position: relative'</span>, see <span title="relative positioning">Relative Positioning</span>. For <span title="'position'!!''static''">'position: static'</span>, ''auto''. Otherwise: if specified as a '<length>', the corresponding absolute length; if specified as a '<percentage>', the specified value; otherwise, ''auto''.</td>
+ </tr>
+ <tr>
+ <th>Canonical order:</th>
+ <td><abbr title="follows order of property value definition">per grammar</abbr></td>
+ </tr>
+ </table>
+ <p>
+ For an absolutely positioned box this property specifies how far the coresponding
+ margin edge is offset from the coresponding physical reference edge of the box's
+ <span>containing block</span>.
- 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.
+ The partiucular physical reference edge that is used when offsetting is based on the
+ 'writing-mode' and 'direction' properties.
+ </p>
+ <p>
+ The combination of the 'writing-mode' and 'direction' properties determine the
+ appropriate physical reference edge for offsetting.
+ The table below shows logical offset properties (per 'writing-mode' and 'direction') and
+ the physical reference edge from which the offset will occur.
+ </p>
+ <div class="figure">
+ <table id="logical-physical-relations" class="lpr">
+ <colgroup>
+ <col>
+ <col>
+ </colgroup>
+ <tbody>
+ <tr>
+ <td rowspan="4"><div>Edge</div></td>
+ <td>top</td>
+ <td>offset-before</td>
+ <td>offset-before</td>
+ <td>offset-start</td>
+ <td>offset-end</td>
+ <td>offset-start</td>
+ <td>offset-end</td>
+ </tr>
+ <tr>
+ <td>right</td>
+ <td>offset-end</td>
+ <td>offset-start</td>
+ <td>offset-before</td>
+ <td>offset-before</td>
+ <td>offset-after</td>
+ <td>offset-after</td>
+ </tr>
+ <tr>
+ <td>bottom</td>
+ <td>offset-after</td>
+ <td>offset-after</td>
+ <td>offset-end</td>
+ <td>offset-start</td>
+ <td>offset-end</td>
+ <td>offset-start</td>
+ </tr>
+ <tr>
+ <td>left</td>
+ <td>offset-start</td>
+ <td>offset-end</td>
+ <td>offset-after</td>
+ <td>offset-after</td>
+ <td>offset-before</td>
+ <td>offset-before</td>
+ </tr>
+ </tbody>
+ <thead>
+ <tr>
+ <th colspan="2" rowspan="2"></th>
+ <td colspan="6">'writing-mode' / 'direction'</td>
+ </tr>
+ <tr>
+ <td>horizontal-tb / ltr</td>
+ <td>horizontal-tb / rtl</td>
+ <td>vertical-rl / ltr</td>
+ <td>vertical-rl / rtl</td>
+ <td>vertical-lr / ltr</td>
+ <td>vertical-lr / rtl</td>
+ </tr>
+ </thead>
+ </table>
+ <p class="caption">Relationship of physical offset edges and the logical properties per 'writing-mode' and 'direction'.</p>
+ </div>
+ <p>
+ For relatively positioned boxes, the offset is with respect to the property's
+ coresponding physical reference 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 the property).
+ </p>
+ <p>
+ For absolutely positioned and center positioned elements whose <span>containing block</span>
+ is based on a block-level element, this property is an offset from the coresponding
+ padding edge of that element.
+ </p>
+ <p>
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.
+ the property's coresponding physical 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">
+ <table id="propdef-offset-end" class="propdef">
<tr>
<th>Name:</th>
- <td><dfn title="'left'">left</dfn></td>
+ <td><dfn title="'offset-end'">offset-end</dfn></td>
</tr>
<tr>
<th><a href="#values">Value</a>:</th>
@@ -1082,20 +1295,108 @@
</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 (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.
+ Similar to 'offset-before' but refer to the table, "Figure 1", for the coresponding
+ physical reference edge that is used for offseting based on 'writing-mode' and 'direction'.
+ </p>
+ <table id="propdef-offset-after" class="propdef">
+ <tr>
+ <th>Name:</th>
+ <td><dfn title="'offset-after'">offset-after</dfn></td>
+ </tr>
+ <tr>
+ <th><a href="#values">Value</a>:</th>
+ <td><var>auto</var> | <var><length></var> | <var><percentage></var></td>
+ </tr>
+ <tr>
+ <th>Initial:</th>
+ <td>auto</td>
+ </tr>
+ <tr>
+ <th>Applies to:</th>
+ <td>positioned elements</td>
+ </tr>
+ <tr>
+ <th>Inherited:</th>
+ <td>no</td>
+ </tr>
+ <tr>
+ <th>Animatable:</th>
+ <td><length>, <percentage></td>
+ </tr>
+ <tr>
+ <th>Percentages:</th>
+ <td>refer to height of <span>containing block</span></td>
+ </tr>
+ <tr>
+ <th>Media:</th>
+ <td>visual</td>
+ </tr>
+ <tr>
+ <th>Computed value:</th>
+ <td>
+ for <span title="'position'!!''relative''">'position: relative'</span>, see <span title="relative positioning">Relative Positioning</span>. For <span title="'position'!!''static''">'position: static'</span>,
+ ''auto''. Otherwise: if specified as a '<length>', the corresponding absolute length;
+ if specified as a '<percentage>', the specified value; otherwise, ''auto''.
+ </td>
+ </tr>
+ <tr>
+ <th>Canonical order:</th>
+ <td><abbr title="follows order of property value definition">per grammar</abbr></td>
+ </tr>
+ </table>
+ <p>
+ Similar to 'offset-before' but refer to the table, "Figure 1", for the coresponding
+ physical reference edge that is used for offseting based on 'writing-mode' and 'direction'.
+ </p>
+ <table id="propdef-offset-start" class="propdef">
+ <tr>
+ <th>Name:</th>
+ <td><dfn title="'offset-start'">offset-start</dfn></td>
+ </tr>
+ <tr>
+ <th><a href="#values">Value</a>:</th>
+ <td><var>auto</var> | <var><length></var> | <var><percentage></var></td>
+ </tr>
+ <tr>
+ <th>Initial:</th>
+ <td>auto</td>
+ </tr>
+ <tr>
+ <th>Applies to:</th>
+ <td>positioned elements</td>
+ </tr>
+ <tr>
+ <th>Inherited:</th>
+ <td>no</td>
+ </tr>
+ <tr>
+ <th>Animatable:</th>
+ <td><length>, <percentage></td>
+ </tr>
+ <tr>
+ <th>Percentages:</th>
+ <td>refer to height of <span>containing block</span></td>
+ </tr>
+ <tr>
+ <th>Media:</th>
+ <td>visual</td>
+ </tr>
+ <tr>
+ <th>Computed value:</th>
+ <td>
+ for <span title="'position'!!''relative''">'position: relative'</span>, see <span title="relative positioning">Relative Positioning</span>. For <span title="'position'!!''static''">'position: static'</span>,
+ ''auto''. Otherwise: if specified as a '<length>', the corresponding absolute length;
+ if specified as a '<percentage>', the specified value; otherwise, ''auto''.
+ </td>
+ </tr>
+ <tr>
+ <th>Canonical order:</th>
+ <td><abbr title="follows order of property value definition">per grammar</abbr></td>
+ </tr>
+ </table>
+ <p>
+ Similar to 'offset-before' but refer to the table, "Figure 1", for the coresponding
+ physical reference edge that is used for offseting based on 'writing-mode' and 'direction'.
</p>
<p>The values for the four properties have the following meanings:</p>
<dl>
@@ -1123,7 +1424,99 @@
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' -->
+ <!-- End section: Logical Box offsets: 'offset-before', 'offset-end', 'offset-after', 'offset-start', and 'offset' -->
+
+ <h2 id="position-root">Choosing a different containing block for positioning</h2>
+ <h3 id="attachment-properties">Attachment properties: 'attachment-type', 'attachment-top', 'attachment-right', 'attachment-bottom', 'attachment-left', and 'attachment'</h3>
+ <!--
+ <h3 id="position-root">Choosing a different containing block for positioning: 'position-reference' property</h3>
+ <p>The 'position-reference' property determines what element to use as a containing block for the current element.</p>
+ <table id="propdef-position-reference" class="propdef">
+ <tr>
+ <th>Name:</th>
+ <td><dfn title="'position-reference'">attachment-top</dfn></td>
+ </tr>
+ <tr>
+ <th><a href="#values">Value</a>:</th>
+ <td><var>auto</var> | <var>parent(<number>)</var> | <var>container</var> | <var>root</var> | <var>page</var> | <var>viewport</var> | <var>element()</var></td>
+ </tr>
+ <tr>
+ <th>Initial:</th>
+ <td>auto</td>
+ </tr>
+ <tr>
+ <th>Applies to:</th>
+ <td>positioned elements</td>
+ </tr>
+ <tr>
+ <th>Inherited:</th>
+ <td>no</td>
+ </tr>
+ <tr>
+ <th>Animatable:</th>
+ <td>no</td>
+ </tr>
+ <tr>
+ <th>Percentages:</th>
+ <td>N/A</td>
+ </tr>
+ <tr>
+ <th>Media:</th>
+ <td>visual</td>
+ </tr>
+ <tr>
+ <th>Computed value:</th>
+ <td>specified value, but see prose</td>
+ </tr>
+ <tr>
+ <th>Canonical order:</th>
+ <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>
+ <dl>
+ <dt><dfn title="'position-reference'!!''auto''">auto</dfn></dt>
+ <dd>
+
+ </dd>
+ <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>
+ <dt><dfn title="'position-reference'!!''container''">container</dfn></dt>
+ <dd>
+ Use the container as the <span>containing box</span>.<br>
+ In the case of multi-column layout the individual column defines the containing
+ block even though the individual column is not an actual element "block box". If
+ not inside a multi-column element then this value computes to ''auto''.
+ </dd>
+ <dt><dfn title="'position-reference'!!''root''">root</dfn></dt>
+ <dd>
+ Use the root element (for HTML and XHTML the html element) as the <span>containing block</span> for the positioned element.
+ </dd>
+ <dt><dfn title="'position-reference'!!''nth-parent()''">nth-parent()</dfn></dt>
+ <dd>
+
+ <p class="issue">
+ Inserting and removing elements from the tree may cause odd behavior with
+ 'nth-parent()'. Is this really a good concept?
+ </p>
+ </dd>
+ <dt><dfn title="'position-reference'!!''element()''">element()</dfn></dt>
+ <dd>
+
+ <p class="issue">
+ Inserting and removing elements from the tree may cause odd behavior with
+ 'element()'. Is this really a good concept?
+ </p>
+ </dd>
+ </dl>
+ -->
+ <p class="issue">
+ Ideas have been raised to allow changing the positioning containing block or allowing
+ positioning and sizing to use different containing blocks.
+ </p>
+ <!-- End section: Choosing a different containing block for positioning: 'position-reference' property -->
<h2 id="size-and-position-details">Sizing and positioning details</h2>
<h3 id="abs-non-replaced-width">The width of absolute, page or fixed positioned, non-replaced elements</h3>
@@ -1616,33 +2009,33 @@
#outer { position: relative; top: -12px; color: red }
#inner { position: relative; top: 12px; color: blue }
</code></pre>
- </div>
- <p>
- Text flows normally up to the <em>outer</em> element. The <em>outer</em> text is
- then flowed into its <span>normal flow</span> position and dimensions at the end of line 1. Then,
- the inline boxes containing the text (distributed over three lines) are shifted as a
- unit by ''-12px'' (upwards).
- </p>
+ </div>
+ <p>
+ Text flows normally up to the <em>outer</em> element. The <em>outer</em> text is
+ then flowed into its <span>normal flow</span> position and dimensions at the end of line 1. Then,
+ the inline boxes containing the text (distributed over three lines) are shifted as a
+ unit by ''-12px'' (upwards).
+ </p>
+ <p>
+ The contents of <em>inner</em>, as a child of <em>outer</em>, would normally flow
+ immediately after the words "of outer contents" (on line 1.5). However, the <em>inner</em>
+ contents are themselves offset relative to the <em>outer</em> contents by ''12px''
+ (downwards), back to their original position on line 2.
+ </p>
+ <p class="note">
+ Note that the content following <em>outer</em> is not affected by the relative
+ positioning of <em>outer</em>.
+ </p>
+ <div class="figure">
<p>
- The contents of <em>inner</em>, as a child of <em>outer</em>, would normally flow
- immediately after the words "of outer contents" (on line 1.5). However, the <em>inner</em>
- contents are themselves offset relative to the <em>outer</em> contents by ''12px''
- (downwards), back to their original position on line 2.
- </p>
- <p class="note">
- Note that the content following <em>outer</em> is not affected by the relative
- positioning of <em>outer</em>.
- </p>
- <div class="figure">
- <p>
- <img src="images/flow-relative.png" alt="Image illustrating the effects of relative positioning on a box's content.">
- <span class="dlink"> <a id="img-flow-relative" href="images/longdesc/flow-relative-desc.html" title="Long description for relative positioning example">[D]</a></span>
- </p>
- </div>
- <p class="note">
- Note also that had the offset of <em>outer</em> been ''-24px'', the text of <em>outer</em>
- and the body text would have overlapped.
+ <img src="images/flow-relative.png" alt="Image illustrating the effects of relative positioning on a box's content.">
+ <span class="dlink"> <a id="img-flow-relative" href="images/longdesc/flow-relative-desc.html" title="Long description for relative positioning example">[D]</a></span>
</p>
+ </div>
+ <p class="note">
+ Note also that had the offset of <em>outer</em> been ''-24px'', the text of <em>outer</em>
+ and the body text would have overlapped.
+ </p>
<!-- End section: Relative positioning -->
<h3 id="comp-floating">Floating a box</h3>
@@ -2253,6 +2646,7 @@
<ol>
<li>background color of element unless it is the root element.</li>
<li>background image of element unless it is the root element.</li>
+ <li>column rule of the element.</li>
<li>border of element.</li>
</ol>
Otherwise, if the element is a block-level table:
@@ -2263,6 +2657,7 @@
<li>row group backgrounds (color then image).</li>
<li>row backgrounds (color then image).</li>
<li>cell backgrounds (color then image).</li>
+ <li>cell column rule for multi-column.</li>
<li>all table borders (in tree order for separated borders).</li>
</ol>
</li>
@@ -2276,6 +2671,7 @@
<ol>
<li>background color of element.</li>
<li>background image of element.</li>
+ <li>column rule of the element.</li>
<li>border of element.</li>
</ol>
Otherwise, the element is a table:
@@ -2286,6 +2682,7 @@
<li>row group backgrounds (color then image).</li>
<li>row backgrounds (color then image).</li>
<li>cell backgrounds (color then image).</li>
+ <li>cell column rule (multi-column).</li>
<li>all table borders (in tree order for separated borders).</li>
</ol>
</li>
@@ -2321,9 +2718,10 @@
For each box that is a child of that element, in that line box, in
tree order:
<ol>
- <li>background color of element. </li>
- <li>background image of element</li>
- <li>border of element. </li>
+ <li>background color of element.</li>
+ <li>background image of element.</li>
+ <li>column rule of the element.</li>
+ <li>border of element.</li>
<li>For inline elements:
<ol>
<li>
Received on Monday, 5 March 2012 17:20:06 UTC