- From: Arron Eicholz via cvs-syncmail <cvsmail@w3.org>
- Date: Mon, 07 Nov 2011 16:47:27 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-positioning
In directory hutz:/tmp/cvs-serv10707
Modified Files:
Overview.html Overview.src.html
Log Message:
Removed position page from the document
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-positioning/Overview.html,v
retrieving revision 1.8
retrieving revision 1.9
diff -u -d -r1.8 -r1.9
--- Overview.html 31 Oct 2011 15:27:32 -0000 1.8
+++ Overview.html 7 Nov 2011 16:47:25 -0000 1.9
@@ -9,6 +9,8 @@
<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
@@ -50,7 +52,7 @@
font: inherit;
}
</style>
-</head>
+
<body>
<div class=head> <!--begin-logo-->
<p id=x><a href="http://www.w3.org/"><img alt=W3C height=48
@@ -86,7 +88,7 @@
<dt>Issues List
<dd><a
- href="http://wiki.csswg.org/spec/css3-position">http://wiki.csswg.org/spec/css3-position</a>
+ href="http://wiki.csswg.org/spec/css3-positioning">http://wiki.csswg.org/spec/css3-positioning</a>
</dl>
<!--begin-copyright-->
<p class=copyright id=copyright-copy-year-2000-w3creg-mit-erci><a
@@ -208,28 +210,23 @@
title="absolute positioning|absolute position|absolutely positioned">Absolute
positioning</span></a>
- <li id=page-positioning-><a href="#page-positioning"><span
- class=secno>6.3. </span><span class=index-def id=page-positioning0
- title="page positioning|page position|page positioned">Page
- positioning</span></a>
-
<li id=center-positioning-><a href="#center-positioning"><span
- class=secno>6.4. </span><span class=index-def id=center-positioning0
+ class=secno>6.3. </span><span class=index-def id=center-positioning0
title="center positioning|center position|center positioned">Center
positioning</span></a>
<li id=fixed-positioning-><a href="#fixed-positioning"><span
- class=secno>6.5. </span><span class=index-def id=fixed-positioning0
+ class=secno>6.4. </span><span class=index-def id=fixed-positioning0
title="fixed positioning|fixed position|fixed positioned">Fixed
positioning</span></a>
<li id=choosing-a-positioning-scheme-position-p><a
- href="#position-property"><span class=secno>6.6. </span>Choosing a
+ href="#position-property"><span class=secno>6.5. </span>Choosing a
positioning scheme: ‘<code class=property>position</code>’
property</a>
<li id=box-offsets-top-right-bottom-left-><a
- href="#box-offsets-trbl"><span class=secno>6.7. </span>Box offsets:
+ href="#box-offsets-trbl"><span class=secno>6.6. </span>Box offsets:
‘<code class=property>top</code>’, ‘<code
class=property>right</code>’, ‘<code
class=property>bottom</code>’, ‘<code
@@ -240,9 +237,9 @@
href="#size-and-position-details"><span class=secno>7. </span>Sizing and
positioning details</a>
<ul class=toc>
- <li id=the-width-of-absolute-page-or-fixed-posi><a
+ <li id=the-width-of-absolute-or-fixed-positione><a
href="#width-of-absolute-non-replaced-elements"><span class=secno>7.1.
- </span>The width of absolute, page or fixed positioned, non-replaced
+ </span>The width of absolute or fixed positioned, non-replaced
elements</a>
<li id=the-width-of-a-center-positioned-non-rep><a
@@ -250,27 +247,27 @@
class=secno>7.2. </span>The width of a center positioned, non-replaced
elements</a>
- <li id=the-width-of-absolute-page-or-fixed-posi0><a
+ <li id=the-width-of-absolute-or-fixed-positione0><a
href="#width-of-absolute-replaced-elements"><span class=secno>7.3.
- </span>The width of absolute, page or fixed positioned, replaced
- elements</a>
+ </span>The width of absolute or fixed positioned, replaced elements</a>
+
<li id=the-width-of-a-center-positioned-replace><a
href="#width-of-center-replaced-elements"><span class=secno>7.4.
</span>The width of a center positioned, replaced elements</a>
- <li id=the-height-of-absolute-page-or-fixed-pos><a
+ <li id=the-height-of-absolute-or-fixed-position><a
href="#height-of-absolute-non-replaced-elements"><span class=secno>7.5.
- </span>The height of absolute, page or fixed positioned, non-replaced
+ </span>The height of absolute or fixed positioned, non-replaced
elements</a>
<li id=the-height-of-a-center-positioned-non-re><a
href="#height-of-center-non-replaced-elements"><span class=secno>7.6.
</span>The height of a center positioned, non-replaced elements</a>
- <li id=the-height-of-absolute-page-or-fixed-pos0><a
+ <li id=the-height-of-absolute-or-fixed-position0><a
href="#height-of-absolute-replaced-elements"><span class=secno>7.7.
- </span>The height of absolute, page or fixed positioned, replaced
+ </span>The height of absolute or fixed positioned, replaced
elements</a>
<li id=the-height-of-a-center-positioned-replac><a
@@ -306,9 +303,6 @@
<li id=absolute-positioning-0><a href="#abs-positioning"><span
class=secno>9.4. </span>Absolute positioning</a>
-
- <li id=page-positioning-0><a href="#page-pos"><span class=secno>9.5.
- </span>Page positioning</a>
</ul>
<li id=clipping-the-clip-property-><a href="#clip-property"><span
@@ -556,7 +550,7 @@
href="#CSS3BOX" rel=biblioentry>[CSS3BOX]<!--{{!CSS3BOX}}--></a>; for
‘<code class=css>fixed</code>’, ‘<code
class=css>absolute</code>’ and ‘<code
- class=css>page</code>’, it is defined as follows:
+ class=css>center</code>’, it is defined as follows:
<ol>
<li id=if-the-element-has-positioned-fixed-the-> If the element has <a
@@ -565,15 +559,6 @@
established by the <a href="#viewport0">viewport</a> in the case of
continuous media or the page area in the case of paged media.
- <li id=if-the-element-has-position-page-the-con> If the element has <a
- href="#page" title="'position'!!''page''">‘<code
- class=css>position: page</code>’</a>, the containing block is the
- <span>initial containing block</span>. Typically this is the <a
- href="#viewport0">viewport</a> or the page area when in paged media. In
- the case of CSS Regions <a href="#CSS3-REGIONS"
- rel=biblioentry>[CSS3-REGIONS]<!--{{!CSS3-REGIONS}}--></a> this is the
- individual region.
-
<li id=if-the-element-has-position-absolute-the> If the element has <a
href="#absolute" title="'position'!!''absolute''">‘<code
class=css>position: absolute</code>’</a>, the containing block is
@@ -610,6 +595,21 @@
</ol>
</ol>
+ <li id=i-the-element-has-position-center-the-co> I the element has <a
+ href="#center" title="'position'!!''center''">‘<code
+ class=css>position: center</code>’</a>, the containing block is
+ established by the nearest ancestor with a ‘<a
+ href="#position"><code class=property>position</code></a>’ other
+ than <a href="#static" title="'position'!!''static''">‘<code
+ class=css>static</code>’</a>, in the following way:
+ <ol>
+ <li id=in-the-case-that-the-ancestor-is-block-l0> In the case that the
+ ancestor is block-level, the containing block is formed by the padding
+ edge of the ancestor.
+
+ <li id=x1>
+ </ol>
+
<li id=if-there-is-no-such-ancestor-the-contain>If there is no such
ancestor, the containing block is the <span>initial containing
block</span>.
@@ -982,9 +982,9 @@
href="#normal-flow0">normal flow</a> entirely (it has no impact on later
siblings). An absolutely positioned box establishes a new <a
href="#containing-block0">containing block</a> for normal 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
+ and absolutely (but not fixed) 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.
<p id=references-in-this-specification-to-an-a> References in this
@@ -999,40 +999,7 @@
class=css>fixed</code>’</a>.</p>
<!-- End section: Absolute positioning -->
- <h3 id=page-positioning><span class=secno>6.3. </span><span class=index-def
- id=page-positioning1
- title="page positioning|page position|page positioned">Page
- positioning</span></h3>
-
- <p id=in-the-page-positioning-model-a-box-is-e> In the page positioning
- model, a box is explicitly offset with respect to its <span>initial
- containing block</span>. It is removed from the <a
- href="#normal-flow0">normal flow</a> entirely (it has no impact on later
- siblings). A page positioned box establishes a new <a
- href="#containing-block0">containing block</a> for <a
- href="#normal-flow0">normal flow</a> children and absolutely (but not
- fixed or 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 id=for-paged-media-boxes-with-page-position> 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 id=references-in-this-specification-to-a-pa> References in this
- specification to a <span class=index-def id=page-positioned-element
- title="page positioned element/box">page positioned element</span> (or its
- box) imply that the element's ‘<a href="#position"><code
- class=property>position</code></a>’ property has the value <a
- href="#page" title="'position'!!''page''">‘<code
- class=css>page</code>’</a>.</p>
- <!-- End section: Page positioning -->
-
- <h3 id=center-positioning><span class=secno>6.4. </span><span
+ <h3 id=center-positioning><span class=secno>6.3. </span><span
class=index-def id=center-positioning1
title="center positioning|center position|center positioned">Center
positioning</span></h3>
@@ -1044,7 +1011,7 @@
siblings). A center positioned box establishes a new <a
href="#containing-block0">containing block</a> for <a
href="#normal-flow0">normal flow</a> children and absolutely (but not
- fixed or page) positioned descendants. However, the contents of an center
+ fixed) 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.
@@ -1058,7 +1025,7 @@
class=css>center</code>’</a>.</p>
<!-- End section: Absolute positioning -->
- <h3 id=fixed-positioning><span class=secno>6.5. </span><span
+ <h3 id=fixed-positioning><span class=secno>6.4. </span><span
class=index-def id=fixed-positioning1
title="fixed positioning|fixed position|fixed positioned">Fixed
positioning</span></h3>
@@ -1153,7 +1120,7 @@
<!-- End section: Fixed positioning -->
<!-- End section: Positioning schemes -->
- <h3 id=position-property><span class=secno>6.6. </span>Choosing a
+ <h3 id=position-property><span class=secno>6.5. </span>Choosing a
positioning scheme: ‘<a href="#position"><code
class=property>position</code></a>’ property</h3>
@@ -1173,7 +1140,7 @@
<th><a href="#values">Value</a>:
<td><var>static</var> | <var>relative</var> | <var>absolute</var> |
- <var>page</var> | <var>center</var> | <var>fixed</var>
+ <var>center</var> | <var>fixed</var>
<tr>
<th>Initial:
@@ -1276,34 +1243,6 @@
href="http://www.w3.org/TR/CSS2/box.html#collapsing-margins">collapse</a>
with any other margins.
- <dt><dfn id=page title="'position'!!''page''">page</dfn>
-
- <dd>
- <p id=the-box39s-position-is-calculated-accord> The box's position is
- calculated according to the "absolute" model, but in addition, the box
- <a href="#containing-block0">containing block</a> is always the
- <span>initial containing block</span>. 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 where
- the page positioned element originated. User agents may paginate the
- content of paged boxes.</p>
-
- <p class=note id=note-that-css-regions-are-also-initial-c> 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">‘<code
- class=property>flow-into</code>’</a> property of the CSS Regions
- Module <a href="#CSS3-REGIONS"
- rel=biblioentry>[CSS3-REGIONS]<!--{{!CSS3-REGIONS}}--></a>.</p>
- </dl>
-
- <p class=issue id=there-have-been-some-discussions-about-t> There have been
- some discussions about the naming of the property value <a href="#page"
- title="'position'!!''page''">‘<code
- class=css>page</code>’</a>. If you have any suggestions please email
- the mailing list.
-
- <dl>
<dt><dfn id=center title="'position'!!''center''">center</dfn>
<dd> The box's position (and possibly size) is specified with the
@@ -1462,7 +1401,7 @@
positioning and sizing to use different containing blocks.</p>
<!-- End section: Choosing a different containing block for positioning: 'position-reference' property -->
- <h3 id=box-offsets-trbl><span class=secno>6.7. </span>Box offsets:
+ <h3 id=box-offsets-trbl><span class=secno>6.6. </span>Box offsets:
‘<a href="#top"><code class=property>top</code></a>’,
‘<a href="#right"><code class=property>right</code></a>’,
‘<a href="#bottom"><code class=property>bottom</code></a>’,
@@ -1548,11 +1487,10 @@
block</a>. 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
<a href="#normal-flow0">normal flow</a>, and then offset from that
- position according to these properties). For page positioned boxes, the
- offset is with respect to the top edge of the <span>initial containing
- block</span> itself. For absolutely positioned elements whose containing
- block is based on a block-level element, these properties are an offset
- from the padding edge of that element.
+ 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.
<table class=propdef id=propdef-right>
<tbody>
@@ -1624,12 +1562,10 @@
far a box's right margin edge is offset to the left of the right edge
of the box's <a href="#containing-block0">containing block</a>. For
relatively positioned boxes, the offset is with respect to the right edge
- of the box itself. For page positioned boxes, the offset is with respect
- to the right edge of the <span>initial containing block</span> itself. For
- absolutely positioned elements whose <a
- href="#containing-block0">containing block</a> is based on a block-level
- element, these properties are an offset from the padding edge of that
- element.
+ of the box itself. For absolutely positioned and center positioned
+ elements whose <a href="#containing-block0">containing block</a> is based
+ on a block-level element, these properties are an offset from the padding
+ edge of that element.
<table class=propdef id=propdef-bottom>
<tbody>
@@ -1701,12 +1637,10 @@
far a box's bottom margin edge is offset above the bottom of the
box's <a href="#containing-block0">containing block</a>. For
relatively positioned boxes, the offset is with respect to the bottom edge
- of the box itself. For page positioned boxes, the offset is with respect
- to the bottom edge of the <span>initial containing block</span> itself.
- For absolutely positioned elements whose <a
- href="#containing-block0">containing block</a> is based on a block-level
- element, these properties are an offset from the padding edge of that
- element.
+ of the box itself. For absolutely positioned and center positioned
+ elements whose <a href="#containing-block0">containing block</a> is based
+ on a block-level element, these properties are an offset from the padding
+ edge of that element.
<table class=propdef id=propdef-left>
<tbody>
@@ -1778,7 +1712,10 @@
far a box's left margin edge is offset to the right of the left edge
of the box's <a href="#containing-block0">containing block</a>. For
relatively positioned boxes, the offset is with respect to the left edge
- of the box itself.
+ of the box itself. For absolutely positioned and center positioned
+ elements whose <a href="#containing-block0">containing block</a> is based
+ on a block-level element, these properties are an offset from the padding
+ edge of that element.
<p id=the-values-for-the-four-properties-have->The values for the four
properties have the following meanings:
@@ -1816,12 +1753,11 @@
replaced elements for details.
</dl>
- <p class=note id=note-for-page-positioned-elements-and-fi> Note, for page
- positioned elements and fixed positioned elements using large values or
- negative values may easily move elements outside the <a
- href="#viewport0">viewport</a> and make the contents unreachable through
- scrolling or other means. Authors should be aware that page positioned
- elements and fixed position elements are always relative to the
+ <p class=note id=note-for-fixed-positioned-elements-using> Note, for fixed
+ positioned elements using large values or negative values may easily move
+ elements outside the <a href="#viewport0">viewport</a> 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>.</p>
<!-- End section: Box offsets: 'top', 'right', 'bottom', 'left' -->
@@ -1829,8 +1765,7 @@
positioning details</h2>
<h3 id=width-of-absolute-non-replaced-elements><span class=secno>7.1.
- </span>The width of absolute, page or fixed positioned, non-replaced
- elements</h3>
+ </span>The width of absolute or fixed positioned, non-replaced elements</h3>
<p id=the-constraint-that-determines-the-used->The constraint that
determines the used values for these elements is:
@@ -1950,7 +1885,7 @@
class=css>auto</code>’, then solve for ‘<a
href="#right"><code class=property>right</code></a>’
</ol>
- <!-- End section: The width of absolute, page or fixed positioned, non-replaced element -->
+ <!-- End section: The width of absolute or fixed positioned, non-replaced element -->
<h3 id=width-of-center-positioned-non-replaced-elements><span
class=secno>7.2. </span>The width of a center positioned, non-replaced
@@ -1965,6 +1900,12 @@
<span>'border-right-width'</span> + <span>'margin-right'</span> + 'right'
= <span>width of containing block</span> </code>
+ <p id=first-set-any-auto-values-for-margin-lef>First set any ‘<code
+ class=css>auto</code>’ values for ‘<code
+ class=property>margin-left</code>’ and ‘<code
+ class=property>margin-right</code>’ to ‘<code
+ class=css>0</code>’.
+
<p id=if-width-is-not-auto-and-margin-left-bor> If ‘<code
class=property>width</code>’ is not ‘<code
class=css>auto</code>’ and ‘<code
@@ -1982,7 +1923,7 @@
class=css>auto</code>’ values for ‘<a href="#left"><code
class=property>left</code></a>’ or ‘<a href="#right"><code
class=property>right</code></a>’ are, for the following rules,
- treated as zero.
+ treated as ‘<code class=css>0</code>’.
<p id=if-all-of-the-above-have-a-computed-valu> If all of the above have a
computed value other than ‘<code class=css>auto</code>’, the
@@ -2017,7 +1958,7 @@
<!-- End section: The width of a center positioned, non-replaced element -->
<h3 id=width-of-absolute-replaced-elements><span class=secno>7.3.
- </span>The width of absolute, page or fixed positioned, replaced elements</h3>
+ </span>The width of absolute or fixed positioned, replaced elements</h3>
<p id=if-height-and-width-both-have-computed-v> If ‘<code
class=property>height</code>’ and ‘<code
@@ -2138,15 +2079,15 @@
class=property>direction</code>’ is ‘<code
class=css>ltr</code>’) and solve for that value.
</ol>
- <!-- End section: The width of absolute, page or fixed positioned, replaced element -->
+ <!-- End section: The width of absolute or fixed positioned, replaced element -->
<h3 id=width-of-center-replaced-elements><span class=secno>7.4. </span>The
width of a center positioned, replaced elements</h3>
<p id=the-used-value-for-width-is-determined-a> The used value for
‘<code class=property>width</code>’ is determined as for "<a
- href="#width-of-absolute-replaced-elements">The width of absolute, page or
- fixed positioned, replaced elements</a>".
+ href="#width-of-absolute-replaced-elements">The width of absolute or fixed
+ positioned, replaced elements</a>".
<p id=then-the-rules-for-the-width-of-a-center> Then the rules for "<a
href="#width-of-center-positioned-non-replaced-elements">The width of a
@@ -2155,8 +2096,7 @@
<!-- End section: The width of a center positioned, replaced element -->
<h3 id=height-of-absolute-non-replaced-elements><span class=secno>7.5.
- </span>The height of absolute, page or fixed positioned, non-replaced
- elements</h3>
+ </span>The height of absolute or fixed positioned, non-replaced elements</h3>
<p id=for-absolutely-positioned-elements-the-u> For absolutely positioned
elements, the used values of the vertical dimensions must satisfy this
@@ -2270,7 +2210,7 @@
class=css>0</code>’ and solve for ‘<a href="#bottom"><code
class=property>bottom</code></a>’.
</ol>
- <!-- End section: The height of absolute, page or fixed positioned, non-replaced element -->
+ <!-- End section: The height of absolute or fixed positioned, non-replaced element -->
<h3 id=height-of-center-non-replaced-elements><span class=secno>7.6.
</span>The height of a center positioned, non-replaced elements</h3>
@@ -2330,7 +2270,7 @@
<!-- End section: The height of a 'center' positioned, non-replaced element -->
<h3 id=height-of-absolute-replaced-elements><span class=secno>7.7.
- </span>The height of absolute, page or fixed positioned, replaced elements</h3>
+ </span>The height of absolute or fixed positioned, replaced elements</h3>
<p id=if-height-and-width-both-have-computed-v2> If ‘<code
class=property>height</code>’ and ‘<code
@@ -2396,15 +2336,15 @@
href="#bottom"><code class=property>bottom</code></a>’ and solve
for that value.
</ol>
- <!-- End section: The height of absolute, page or fixed positioned, replaced element -->
+ <!-- End section: The height of absolute or fixed positioned, replaced element -->
<h3 id=height-of-center-replaced-elements><span class=secno>7.8. </span>The
height of a center positioned, replaced elements</h3>
<p id=the-used-value-for-height-is-determined-> The used value for
‘<code class=property>height</code>’ is determined as for "<a
- href="#height-of-absolute-replaced-elements">The height of absolute, page
- or fixed positioned, replaced elements</a>".
+ href="#height-of-absolute-replaced-elements">The height of absolute or
+ fixed positioned, replaced elements</a>".
<p id=then-the-rules-for-the-height-of-a-cente> Then the rules for "<a
href="#height-of-center-non-replaced-elements">The height of a center
@@ -2418,9 +2358,9 @@
<p id=in-certain-cases-see-e.g.-the-height-of-> 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:
+ absolute or fixed positioned, non-replaced element</a> above), the height
+ of an element that establishes a block formatting context is computed as
+ follows:
<p id=if-it-only-has-inline-level-children-the> If it only has inline-level
children, the height is the distance between the top of the topmost line
@@ -2471,9 +2411,7 @@
<li id=otherwise-if-position-has-the-value-abso> Otherwise, if ‘<a
href="#position"><code class=property>position</code></a>’ has the
value <a href="#absolute" title="'position'!!''absolute''">‘<code
- class=css>absolute</code>’</a>, <a href="#page"
- title="'position'!!''page''">‘<code
- class=css>page</code>’</a> or <a href="#fixed"
+ class=css>absolute</code>’</a> or <a href="#fixed"
title="'position'!!''fixed''">‘<code
class=css>fixed</code>’</a>, and the value of ‘<a
href="#floats0"><code class=property>float</code></a>’ is ‘<a
@@ -2519,16 +2457,6 @@
<td>table
<tr>
- <td>inline-flexbox
-
- <td>flexbox
-
- <tr>
- <td>inline-grid
-
- <td>grid
-
- <tr>
<td> inline, <span>table-row-group</span>, <span>table-column</span>,
<span>table-column-group</span>, <span>table-header-group</span>,
<span>table-footer-group</span>, <span>table-row</span>,
@@ -2543,8 +2471,10 @@
<td><span>same as specified</span>
</table>
- <p class=issue id=what-about-display-types-ruby-etc...>What about display
- types, "ruby, etc..."?</p>
+ <p class=note id=for-new-values-defined-for-the-display-p> For new values
+ defined for the ‘<code class=property>display</code>’
+ property, the respective modules that define a new value also define the
+ handling of the relationship with positioning and floats.</p>
<!-- End section: Relationships between 'display', 'position', and 'float' -->
<h2 id=comparison-of-flow-floats-absolute-positioning><span class=secno>9.
@@ -2924,117 +2854,8 @@
change bars seem to "float" to the left of the current line.</p>
<!-- End section: Absolute positoining -->
- <h3 id=page-pos><span class=secno>9.5. </span>Page positioning</h3>
-
- <p id=finally-we-consider-the-effect-of-page-p> Finally, we consider the
- effect of page positioning. Consider the following CSS declarations for
- <em>outer</em> and <em>inner</em>:
-
- <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 id=which-cause-the-top-of-the-outer-box-to-0> which cause the top of the
- <em>outer</em> box to be positioned with respect to its <a
- href="#containing-block0">containing block</a>. The <a
- href="#containing-block0">containing block</a> 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 ‘<code
- class=css>200px</code>’ below the top of the <span>initial
- containing block</span> and the left side is ‘<code
- class=css>200px</code>’ from the left side. The child box of
- <em>outer</em> is flowed normally with respect to its parent.
-
- <div class=figure>
- <p id=nbspnbspnbspd-8> <img
- alt="Image illustrating the effects of absolutely positioning a box."
- src="images/flow-absolute.png"> <span class=dlink> <a
- href="http://www.w3.org/TR/CSS2/images/longdesc/flow-absolute-desc.html"
- id=img-flow-absolute2
- title="Long description for example illustrating absolute positioning">[D]</a></span>
- </p>
- </div>
-
- <p id=the-following-example-shows-a-page-posit> 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 ‘<a
- href="#position"><code class=property>position</code></a>’ property
- to <a href="#relative" title="'position'!!''relative''">‘<code
- class=css>relative</code>’</a> 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 <a
- href="#containing-block0">containing block</a> is not the <a
- href="#relative-positioning1" title="relative positioning">relative
- positioned</a> <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.
-
- <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 id=this-results-in-something-like-the-follo0>This results in something
- like the following:
-
- <div class=figure>
- <p id=nbspnbspnbspd-9> <img
- alt="Image illustrating the effects of page positioning a box with respect to the initial containing block."
- src="images/flow-static.png"> <span class=dlink> <a
- href="http://www.w3.org/TR/CSS2/images/longdesc/flow-static-desc.html"
- id=img-flow-static2
- title="Long description illustrating page positioning with respect to the initial containing block.">[D]</a></span>
- </p>
- </div>
-
- <p id=if-we-do-not-position-the-outer-box0>If we do not position the
- <em>outer</em> box:
-
- <div class=example>
- <pre><code class=css>
-#outer { color: red }
-#inner {
- position: page;
- top: 200px; left: -100px;
- height: 130px; width: 130px;
- color: blue;
-}
-</code></pre>
- </div>
-
- <p id=the-containing-block-for-inner-becomes-t0> the <a
- href="#containing-block0">containing block</a> for <em>inner</em> becomes
- the <span>initial containing block</span>. The following illustration
- shows where the <em>inner</em> box would end up in this case.
-
- <div class=figure>
- <p id=nbspnbspnbspd-10> <img
- alt="Image illustrating the effects of page positioning a box with respect to the initial containing block."
- src="images/flow-static.png"> <span class=dlink> <a
- href="http://www.w3.org/TR/CSS2/images/longdesc/flow-static-desc.html"
- id=img-flow-static3
- 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 id=need-to-add-example-for-center-positioni>Need to add
+ example for center positioning.</p>
<!-- End section: Comparison of normal flow, floats, and absolute positioning -->
<h2 id=clip-property><span class=secno>10. </span>Clipping: the ‘<a
@@ -3166,7 +2987,7 @@
relative to the respective edges of the element.</p>
<div class=figure>
- <p id=nbspnbspnbspd-11> <img alt="diagram of rect() vs inset()"
+ <p id=nbspnbspnbspd-8> <img alt="diagram of rect() vs inset()"
src="images/clip.png"> <span class=dlink> <a
href="longdesc/rect-inset-desc.html" id=img-clip
title="Long description illustrating the differences between the rect() and inset() values.">[D]</a></span>
@@ -3916,16 +3737,6 @@
</dd>
<!---->
- <dt id=CSS3-REGIONS>[CSS3-REGIONS]
-
- <dd>Vincent Hardy. <a
- href="http://www.w3.org/TR/2011/WD-css3-regions-20110609/"><cite>CSS
- Regions Module.</cite></a> 9 June 2011. W3C Working Draft. (Work in
- progress.) URL: <a
- href="http://www.w3.org/TR/2011/WD-css3-regions-20110609/">http://www.w3.org/TR/2011/WD-css3-regions-20110609/</a>
- </dd>
- <!---->
-
<dt id=CSS3BOX>[CSS3BOX]
<dd>Bert Bos. <a
@@ -4005,37 +3816,37 @@
<li>‘<a href="#bottom"><code
class=property>bottom</code></a>’, <a href="#bottom"
- title="'bottom'"><strong>6.7.</strong></a>
+ title="'bottom'"><strong>6.6.</strong></a>
<ul>
<li>‘<code class=css>auto</code>’, <a href="#auto"
- title="'bottom', ''auto''"><strong>6.7.</strong></a>
+ title="'bottom', ''auto''"><strong>6.6.</strong></a>
<li>‘<code class=css><length></code>’, <a
href="#ltlengthgt"
- title="'bottom', ''<length>''"><strong>6.7.</strong></a>
+ title="'bottom', ''<length>''"><strong>6.6.</strong></a>
<li>‘<code class=css><percentage></code>’, <a
href="#ltpercentagegt"
- title="'bottom', ''<percentage>''"><strong>6.7.</strong></a>
+ title="'bottom', ''<percentage>''"><strong>6.6.</strong></a>
</ul>
<li>center position, <a href="#center-positioning0"
- title="center position"><strong>6.4.</strong></a>, <a
+ title="center position"><strong>6.3.</strong></a>, <a
href="#center-positioning1"
- title="center position"><strong>6.4.</strong></a>
+ title="center position"><strong>6.3.</strong></a>
<li>center positioned, <a href="#center-positioning0"
- title="center positioned"><strong>6.4.</strong></a>, <a
+ title="center positioned"><strong>6.3.</strong></a>, <a
href="#center-positioning1"
- title="center positioned"><strong>6.4.</strong></a>
+ title="center positioned"><strong>6.3.</strong></a>
<li>center positioned element/box, <a href="#center-positioned-element"
- title="center positioned element/box"><strong>6.4.</strong></a>
+ title="center positioned element/box"><strong>6.3.</strong></a>
<li>center positioning, <a href="#center-positioning0"
- title="center positioning"><strong>6.4.</strong></a>, <a
+ title="center positioning"><strong>6.3.</strong></a>, <a
href="#center-positioning1"
- title="center positioning"><strong>6.4.</strong></a>
+ title="center positioning"><strong>6.3.</strong></a>
<li>‘<a href="#clip"><code class=property>clip</code></a>’, <a
href="#clip" title="'clip'"><strong>10.</strong></a>
@@ -4059,19 +3870,19 @@
title="containing block"><strong>3.1.</strong></a>
<li>fixed position, <a href="#fixed-positioning0"
- title="fixed position"><strong>6.5.</strong></a>, <a
+ title="fixed position"><strong>6.4.</strong></a>, <a
href="#fixed-positioning1"
- title="fixed position"><strong>6.5.</strong></a>
+ title="fixed position"><strong>6.4.</strong></a>
<li>fixed positioned, <a href="#fixed-positioning0"
- title="fixed positioned"><strong>6.5.</strong></a>, <a
+ title="fixed positioned"><strong>6.4.</strong></a>, <a
href="#fixed-positioning1"
- title="fixed positioned"><strong>6.5.</strong></a>
+ title="fixed positioned"><strong>6.4.</strong></a>
<li>fixed positioning, <a href="#fixed-positioning0"
- title="fixed positioning"><strong>6.5.</strong></a>, <a
+ title="fixed positioning"><strong>6.4.</strong></a>, <a
href="#fixed-positioning1"
- title="fixed positioning"><strong>6.5.</strong></a>
+ title="fixed positioning"><strong>6.4.</strong></a>
<li>float, <a href="#floats0" title=float><strong>5.</strong></a>
@@ -4082,18 +3893,18 @@
title="floating box"><strong>5.</strong></a>
<li>‘<a href="#left"><code class=property>left</code></a>’, <a
- href="#left" title="'left'"><strong>6.7.</strong></a>
+ href="#left" title="'left'"><strong>6.6.</strong></a>
<ul>
<li>‘<code class=css>auto</code>’, <a href="#auto"
- title="'left', ''auto''"><strong>6.7.</strong></a>
+ title="'left', ''auto''"><strong>6.6.</strong></a>
<li>‘<code class=css><length></code>’, <a
href="#ltlengthgt"
- title="'left', ''<length>''"><strong>6.7.</strong></a>
+ title="'left', ''<length>''"><strong>6.6.</strong></a>
<li>‘<code class=css><percentage></code>’, <a
href="#ltpercentagegt"
- title="'left', ''<percentage>''"><strong>6.7.</strong></a>
+ title="'left', ''<percentage>''"><strong>6.6.</strong></a>
</ul>
<li>local stacking contexts, <a href="#local-stacking-contexts"
@@ -4102,49 +3913,28 @@
<li>normal flow, <a href="#normal-flow0"
title="normal flow"><strong>4.</strong></a>
- <li>page position, <a href="#page-positioning0"
- title="page position"><strong>6.3.</strong></a>, <a
- href="#page-positioning1" title="page position"><strong>6.3.</strong></a>
-
-
- <li>page positioned, <a href="#page-positioning0"
- title="page positioned"><strong>6.3.</strong></a>, <a
- href="#page-positioning1"
- title="page positioned"><strong>6.3.</strong></a>
-
- <li>page positioned element/box, <a href="#page-positioned-element"
- title="page positioned element/box"><strong>6.3.</strong></a>
-
- <li>page positioning, <a href="#page-positioning0"
- title="page positioning"><strong>6.3.</strong></a>, <a
- href="#page-positioning1"
- title="page positioning"><strong>6.3.</strong></a>
-
<li>‘<a href="#position"><code
class=property>position</code></a>’, <a href="#position"
- title="'position'"><strong>6.6.</strong></a>
+ title="'position'"><strong>6.5.</strong></a>
<ul>
<li>‘<code class=css>absolute</code>’, <a href="#absolute"
- title="'position', ''absolute''"><strong>6.6.</strong></a>
+ title="'position', ''absolute''"><strong>6.5.</strong></a>
<li>‘<code class=css>center</code>’, <a href="#center"
- title="'position', ''center''"><strong>6.6.</strong></a>
+ title="'position', ''center''"><strong>6.5.</strong></a>
<li>‘<code class=css>fixed</code>’, <a href="#fixed"
- title="'position', ''fixed''"><strong>6.6.</strong></a>
-
- <li>‘<code class=css>page</code>’, <a href="#page"
- title="'position', ''page''"><strong>6.6.</strong></a>
+ title="'position', ''fixed''"><strong>6.5.</strong></a>
<li>‘<code class=css>relative</code>’, <a href="#relative"
- title="'position', ''relative''"><strong>6.6.</strong></a>
+ title="'position', ''relative''"><strong>6.5.</strong></a>
<li>‘<code class=css>static</code>’, <a href="#static"
- title="'position', ''static''"><strong>6.6.</strong></a>
+ title="'position', ''static''"><strong>6.5.</strong></a>
</ul>
<li>positioned element/box, <a href="#positioned"
- title="positioned element/box"><strong>6.7.</strong></a>
+ title="positioned element/box"><strong>6.6.</strong></a>
<li>positioning schemes, <a href="#positioning-schemes1"
title="positioning schemes"><strong>6.</strong></a>
@@ -4162,18 +3952,18 @@
title=renderer><strong>13.2.</strong></a>
<li>‘<a href="#right"><code class=property>right</code></a>’,
- <a href="#right" title="'right'"><strong>6.7.</strong></a>
+ <a href="#right" title="'right'"><strong>6.6.</strong></a>
<ul>
<li>‘<code class=css>auto</code>’, <a href="#auto"
- title="'right', ''auto''"><strong>6.7.</strong></a>
+ title="'right', ''auto''"><strong>6.6.</strong></a>
<li>‘<code class=css><length></code>’, <a
href="#ltlengthgt"
- title="'right', ''<length>''"><strong>6.7.</strong></a>
+ title="'right', ''<length>''"><strong>6.6.</strong></a>
<li>‘<code class=css><percentage></code>’, <a
href="#ltpercentagegt"
- title="'right', ''<percentage>''"><strong>6.7.</strong></a>
+ title="'right', ''<percentage>''"><strong>6.6.</strong></a>
</ul>
<li>root stacking context, <a href="#root-stacking-context"
@@ -4192,18 +3982,18 @@
</ul>
<li>‘<a href="#top"><code class=property>top</code></a>’, <a
- href="#top" title="'top'"><strong>6.7.</strong></a>
+ href="#top" title="'top'"><strong>6.6.</strong></a>
<ul>
<li>‘<code class=css>auto</code>’, <a href="#auto"
- title="'top', ''auto''"><strong>6.7.</strong></a>
+ title="'top', ''auto''"><strong>6.6.</strong></a>
<li>‘<code class=css><length></code>’, <a
href="#ltlengthgt"
- title="'top', ''<length>''"><strong>6.7.</strong></a>
+ title="'top', ''<length>''"><strong>6.6.</strong></a>
<li>‘<code class=css><percentage></code>’, <a
href="#ltpercentagegt"
- title="'top', ''<percentage>''"><strong>6.7.</strong></a>
+ title="'top', ''<percentage>''"><strong>6.6.</strong></a>
</ul>
<li>viewport, <a href="#viewport0" title=viewport><strong>2.</strong></a>
@@ -4291,7 +4081,7 @@
<tr>
<th><a class=property href="#position">position</a>
- <td>static | relative | absolute | page | center | fixed
+ <td>static | relative | absolute | center | fixed
<td>static
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-positioning/Overview.src.html,v
retrieving revision 1.9
retrieving revision 1.10
diff -u -d -r1.9 -r1.10
--- Overview.src.html 31 Oct 2011 15:27:32 -0000 1.9
+++ Overview.src.html 7 Nov 2011 16:47:25 -0000 1.10
@@ -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/css3-position">http://wiki.csswg.org/spec/css3-position</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 ''page'', it is defined as follows:
+ ''fixed'', ''absolute'' and ''center'', it is defined as follows:
</p>
<ol>
<li>
@@ -192,11 +192,6 @@
the case of paged media.
</li>
<li>
- If the element has <span title="'position'!!''page''">'position: page'</span>, the containing block is the <span>initial
- containing block</span>. Typically 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.
- </li>
- <li>
If the element has <span title="'position'!!''absolute''">'position: absolute'</span>, the containing block is established
by the nearest ancestor with a 'position' other than <span title="'position'!!''static''">''static''</span>, in the following way:
<ol>
@@ -228,6 +223,19 @@
</li>
</ol>
</li>
+ <li>
+ I the element has <span title="'position'!!''center''">'position: center'</span>, the containing block is established
+ by the nearest ancestor with a 'position' other than <span title="'position'!!''static''">''static''</span>, in the following way:
+ <ol>
+ <li>
+ In the case that the ancestor is block-level, the containing block is formed
+ by the padding edge of the ancestor.
+ </li>
+ <li>
+
+ </li>
+ </ol>
+ </li>
<li>If there is no such ancestor, the containing block is the <span>initial containing block</span>.</li>
</ol>
<p>
@@ -438,7 +446,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 or page) positioned descendants. However, the
+ flow children and absolutely (but not fixed) 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.
@@ -449,34 +457,12 @@
</p>
<!-- End section: Absolute 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>initial
- 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 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="center-positioning"><span class="index-def" title="center positioning|center position|center positioned">Center positioning</span></h3>
<p>
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 or page) positioned descendants. However, the
+ flow</span> children and absolutely (but not fixed) 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.
@@ -581,7 +567,7 @@
</tr>
<tr>
<th><a href="#values">Value</a>:</th>
- <td><var>static</var> | <var>relative</var> | <var>absolute</var> | <var>page</var> | <var>center</var> | <var>fixed</var></td>
+ <td><var>static</var> | <var>relative</var> | <var>absolute</var> | <var>center</var> | <var>fixed</var></td>
</tr>
<tr>
<th>Initial:</th>
@@ -658,26 +644,6 @@
absolutely positioned boxes may have margins, those 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, but in
- addition, the box <span>containing block</span> is always the <span>initial containing block</span>. 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 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>
- <p class="issue">
- There have been some discussions about the naming of the property value <span title="'position'!!''page''">''page''</span>.
- If you have any suggestions please email the mailing list.
- </p>
<dt><dfn title="'position'!!''center''">center</dfn></dt>
<dd>
The box's position (and possibly size) is specified with the 'top', 'right',
@@ -875,8 +841,7 @@
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 page positioned boxes, the offset is with respect to the top edge of
- the <span>initial containing block</span> itself. For absolutely positioned elements whose containing
+ 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.
</p>
@@ -929,9 +894,8 @@
<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 page positioned boxes, the offset
- is with respect to the right edge of the <span>initial containing block</span> itself. For absolutely
- positioned elements whose <span>containing block</span> is based on a block-level element, these
+ 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.
</p>
<table id="propdef-bottom" class="propdef">
@@ -983,9 +947,8 @@
<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 page positioned boxes, the offset is
- with respect to the bottom edge of the <span>initial containing block</span> itself. For absolutely
- positioned elements whose <span>containing block</span> is based on a block-level element, these
+ 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.
</p>
<table id="propdef-left" class="propdef">
@@ -1037,7 +1000,9 @@
<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.
+ 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.
</p>
<p>The values for the four properties have the following meanings:</p>
<dl>
@@ -1059,14 +1024,14 @@
</dd>
</dl>
<p class="note">
- Note, for page positioned elements and fixed positioned elements using large values or negative values may easily move elements
+ 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 page positioned elements and fixed position elements are always relative to the <span>initial containing block</span>.
+ Authors should be aware that 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, page or fixed positioned, non-replaced elements</h3>
+ <h3 id="width-of-absolute-non-replaced-elements">The width of absolute or fixed positioned, non-replaced elements</h3>
<p>The constraint that determines the used values for these elements is:</p>
<p>
<code>
@@ -1115,7 +1080,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, page or fixed positioned, non-replaced element -->
+ <!-- End section: The width of absolute 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>
@@ -1126,11 +1091,12 @@
'right' = <span>width of containing block</span>
</code>
</p>
+ <p>First set any ''auto'' values for 'margin-left' and 'margin-right' to ''0''.</p>
<p>
If 'width' is not ''auto'' and 'margin-left' + 'border-left-width' + 'padding-left' +
'width' + 'padding-right' + 'border-right-width' + 'margin-right' (plus any of 'left' or
'right' that are not ''auto'') is larger than the width of the <span>containing block</span>, then
- any ''auto'' values for 'left' or 'right' are, for the following rules, treated as zero.
+ any ''auto'' values for 'left' or 'right' are, for the following rules, treated as ''0''.
</p>
<p>
If all of the above have a computed value other than ''auto'', the values are said to be
@@ -1154,7 +1120,7 @@
</p>
<!-- End section: The width of a center positioned, non-replaced element -->
- <h3 id="width-of-absolute-replaced-elements">The width of absolute, page or fixed positioned, replaced elements</h3>
+ <h3 id="width-of-absolute-replaced-elements">The width of absolute 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'.
@@ -1216,11 +1182,11 @@
case 'direction' is ''ltr'') and solve for that value.
</li>
</ol>
- <!-- End section: The width of absolute, page or fixed positioned, replaced element -->
+ <!-- End section: The width of absolute 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, page or fixed
+ The used value for 'width' is determined as for "<a href="#width-of-absolute-replaced-elements">The width of absolute or fixed
positioned, replaced elements</a>".
</p>
<p>
@@ -1230,7 +1196,7 @@
<!-- End section: The width of a center positioned, replaced element -->
- <h3 id="height-of-absolute-non-replaced-elements">The height of absolute, page or fixed positioned, non-replaced elements</h3>
+ <h3 id="height-of-absolute-non-replaced-elements">The height of absolute or fixed positioned, non-replaced elements</h3>
<p>
For absolutely positioned elements, the used values of the vertical dimensions must
satisfy this constraint:
@@ -1282,7 +1248,7 @@
'margin-top' and 'margin-bottom' to ''0'' and solve for 'bottom'.
</li>
</ol>
- <!-- End section: The height of absolute, page or fixed positioned, non-replaced element -->
+ <!-- End section: The height of absolute 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>
@@ -1319,7 +1285,7 @@
</p>
<!-- End section: The height of a 'center' positioned, non-replaced element -->
- <h3 id="height-of-absolute-replaced-elements">The height of absolute, page or fixed positioned, replaced elements</h3>
+ <h3 id="height-of-absolute-replaced-elements">The height of absolute 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'.
@@ -1359,11 +1325,11 @@
solve for that value.
</li>
</ol>
- <!-- End section: The height of absolute, page or fixed positioned, replaced element -->
+ <!-- End section: The height of absolute 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, page or fixed
+ The used value for 'height' is determined as for "<a href="#height-of-absolute-replaced-elements">The height of absolute or fixed
positioned, replaced elements</a>".
</p>
<p>
@@ -1374,7 +1340,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, page 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 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>
@@ -1411,7 +1377,7 @@
case, the element generates no box.
</li>
<li>
- 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
+ Otherwise, if 'position' has the value <span title="'position'!!''absolute''">''absolute''</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
@@ -1439,14 +1405,6 @@
<td>table</td>
</tr>
<tr>
- <td>inline-flexbox</td>
- <td>flexbox</td>
- </tr>
- <tr>
- <td>inline-grid</td>
- <td>grid</td>
- </tr>
- <tr>
<td>
inline, <span>table-row-group</span>, <span>table-column</span>, <span>table-column-group</span>,
<span>table-header-group</span>, <span>table-footer-group</span>, <span>table-row</span>,
@@ -1459,7 +1417,10 @@
<td><span>same as specified</span></td>
</tr>
</table>
- <p class="issue">What about display types, "ruby, etc..."?</p>
+ <p class="note">
+ For new values defined for the 'display' property, the respective modules that define a
+ new value also define the handling of the relationship with positioning and floats.
+ </p>
<!-- End section: Relationships between 'display', 'position', and 'float' -->
<h2 id="comparison-of-flow-floats-absolute-positioning">Comparison of normal flow, floats, and positioning</h2>
@@ -1760,88 +1721,7 @@
</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 absolutely positioning a box.">
- <span class="dlink"> <a id="img-flow-absolute2" href="http://www.w3.org/TR/CSS2/images/longdesc/flow-absolute-desc.html" title="Long description for example illustrating absolute 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-static2" href="http://www.w3.org/TR/CSS2/images/longdesc/flow-static-desc.html" title="Long description illustrating page positioning with respect to the initial containing block.">[D]</a></span>
- </p>
- </div>
- <p>If we do not position the <em>outer</em> box:</p>
- <div class="example">
-<pre><code class="css">
-#outer { color: red }
-#inner {
- position: page;
- top: 200px; left: -100px;
- height: 130px; width: 130px;
- color: blue;
-}
-</code></pre>
- </div>
- <p>
- the <span>containing block</span> for <em>inner</em> becomes the <span>initial containing block</span>. The
- following illustration shows where the <em>inner</em> box would end up in this case.
- </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-static3" href="http://www.w3.org/TR/CSS2/images/longdesc/flow-static-desc.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 -->
<h2 id="clip-property">Clipping: the 'clip' property</h2>
@@ -2352,12 +2232,27 @@
<li>Optionally, if the element is block-level, the outline of the element (see <a href="#stack-order-step-ten">10 below</a>).</li>
</ol>
</li>
- <li>
- All positioned descendants with 'z-index: auto' or 'z-index: 0', in tree order. For
- those with 'z-index: auto', treat the element as if it created a new stacking
- context, but any positioned descendants and descendants which actually create a new
- stacking context should be considered part of the parent stacking context, not this
- new one. For those with 'z-index: 0' treat the stacking context generated atomically.
+ <li>All positioned, opacity or transform descendants, in tree order that fall into the following categories:
+ <ol>
+ <li>
+ All positioned descendants with 'z-index: auto' or 'z-index: 0', in tree order.
+
+ For those with 'z-index: auto', treat the element as if it created a new stacking
+ context, but any positioned descendants and descendants which actually create a new
+ stacking context should be considered part of the parent stacking context, not this
+ new one.
+
+ For those with 'z-index: 0' treat the stacking context generated atomically.
+ </li>
+ <li>
+ All opacity descendants with 'opacity' less than ''1'', in tree order, create a
+ stacking context generated atomically.
+ </li>
+ <li>
+ All transform descendants with 'transform' other than ''none'', in tree order, create
+ a stacking context generated atomically.
+ </li>
+ </ol>
</li>
<li>
Stacking contexts formed by positioned descendants with z-indices greater than or
Received on Monday, 7 November 2011 16:47:41 UTC