[css-position-3] Rewrite abspos and fixedpos sections.

Author: fantasai

css-position-3/Overview.bs

@@ -220,7 +220,7 @@ Choosing A Positioning Scheme: 'position' property</h2>
 		and does not affect the size or position of any other box,
 		except insofar as it increases the [=scrollable overflow area=] of its ancestors.
 		This [=positioning scheme=] is called
-		<dfn export dfn lt="relative position|relatively position|relatively-positioned" local-lt="relative|relatively">relative positioning</dfn>.
+		<dfn export dfn lt="relative position|relatively position|relatively-positioned|sticky-positioned box" local-lt="relative|relatively">relative positioning</dfn>.
 
 	<dt><dfn>sticky</dfn>
 	<dd>
@@ -246,7 +246,7 @@ Choosing A Positioning Scheme: 'position' property</h2>
 		It can overlap in-flow siblings
 		or other [=absolutely positioned=] elements.
 		This [=positioning scheme=] is called
-		<dfn export dfn lt="absolute position|absolutely position|absolutely-positioned" local-lt="absolute|absolutely">absolute positioning</dfn>.
+		<dfn export dfn lt="absolute position|absolutely position|absolutely-positioned|absolutely positioned box" local-lt="absolute|absolutely">absolute positioning</dfn>.
 
 	<dt><dfn>fixed</dfn>
 	<dd>
@@ -257,7 +257,7 @@ Choosing A Positioning Scheme: 'position' property</h2>
 		it does not move when the document is scrolled,
 		and is replicated on every page when it is paginated.
 		This [=positioning scheme=] is called
-		<dfn export dfn lt="fixed position|fixed-positioned" local-lt="fixed">fixed positioning</dfn>
+		<dfn export dfn lt="fixed position|fixed-positioned|fixed-positioned box" local-lt="fixed">fixed positioning</dfn>
 		and is considered a subset of [=absolute positioning=].
 
 		<div class="example">
@@ -292,6 +292,7 @@ Containing Blocks of Positioned Boxes</h3>
 			The [=containing block=] is established by
 			the [=viewport=] in the case of [=continuous media=],
 			or the [=page area=] in the case of [=paged media=].
+			See [[#fixed-pos]].
 
 		<dt id="absolute-cb">If the box has ''position: absolute'':
 		<dd>
@@ -613,26 +614,23 @@ Sticky positioning</h3>
 	are offset independently,
 	and therefore might overlap.
 
-<!-- End section: Sticky positioning	-->
+<!-- End section: Sticky positioning -->
 
 <h3 id="abs-pos">
 Absolute positioning</h3>
 
-	In the absolute positioning model,
-	a box is explicitly offset with respect to its <a>containing block</a>.
-	It is removed from the <a>normal flow</a> entirely
-	(it has no impact on later siblings).
-	An absolutely positioned box establishes a new <a>containing block</a>
-	for normal 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.
+	For an [=absolutely positioned=] box,
+	the [=inset properties=] effectively reduce the [=containing block=]
+	into which it is sized and positioned.
 
-	References in this specification to an absolutely positioned element (or its box)
-	imply that the element’s 'position' property has the value ''absolute'' or ''fixed''.
+	If this results in an effective [=containing block=] size in any axis
+	less than zero,
+	then the effective end-edge inset in the affected axis
+	is reduced to bring that size up to zero.
 
-	Though absolutely positioned boxes may have margins,
-	those margins do not <a href="https://www.w3.org/TR/CSS2/box.html#collapsing-margins">collapse</a> with any other margins.
+	Sizing and positioning of the [=absolutely positioned box=]
+	into this effective [=containing block=]
+	is as described in [[#size-and-position-details]].
 
 <h4 id="breaking">
 Fragmenting Absolutely-positioned Elements</h4>
@@ -666,104 +664,28 @@ Fragmenting Absolutely-positioned Elements</h4>
 <h3 id="fixed-pos">
 Fixed positioning</h3>
 
-	Fixed positioning is similar to absolute positioning.
-	The only difference is that for a fixed positioned box,
-	the <a>containing block</a> is established by the <a>viewport</a>.
-	For <a href="https://www.w3.org/TR/CSS2/media.html#continuous-media-group">continuous media</a>,
-	fixed boxes do not move when the document is scrolled.
-	In this respect, they are similar to
-	<a href="https://www.w3.org/TR/CSS2/colors.html#background-properties">fixed background images</a>.
-	For <a href="https://www.w3.org/TR/CSS2/media.html#paged-media-group">paged media</a>,
-	boxes with fixed positions are repeated on every page.
-	This is useful for placing, for instance, a signature at the bottom of each page.
-	Boxes with fixed position that are larger than the page area are clipped.
-	Parts of the fixed position box that are not visible in the <a>initial containing block</a>
-	will not print.
-
-	The box’s position is calculated according to the "absolute" model,
-	but in addition,
-	the box is fixed with respect to some reference.
-	As with the "absolute" model,
-	the box’s margins do not collapse with any other margins.
-	In the case of handheld, projection, screen, tty, and tv media types,
-	the box is fixed with respect to the <a>viewport</a> and does not move when scrolled.
-
-	In the case of the print media type,
-	the box is rendered on every page,
-	and is fixed with respect to the page box,
-	even if the page is seen through a <a>viewport</a>
-	(in the case of a print-preview, for example).
-
-	For other media types, the presentation is undefined.
+	[=Fixed positioning=] is similar to absolute positioning.
+	The only difference is that for a [=fixed positioned box=],
+	the <a>containing block</a> is:
 
-	<div class="example">
-		Authors can use fixed positioning to create the following presentation:
+	* in <a href="https://www.w3.org/TR/CSS2/media.html#continuous-media-group">continuous media</a>,
+		the <a>viewport</a>;
+		as a result, [=fixed=] boxes do not move when the document is scrolled.
 
-		<figure>
-			<img src="images/frame.png" alt="Example of frame layout">
-			<figcaption>
-				A page layout with a static header and footer at the top and bottom,
-				a sidebar to one side,
-				and main content filling the remaining center space.
-			</figcaption>
-		</figure>
+		Note: In this respect, they are similar to
+		<a href="https://www.w3.org/TR/CSS2/colors.html#background-properties">fixed background images</a>.
 
-		This might be achieved with the following HTML document and style rules:
+	* in <a href="https://www.w3.org/TR/CSS2/media.html#paged-media-group">paged media</a>,
+		the [=page area=] of each page;
+		[=fixed boxes=] are thus replicated on every page.
+		(They are fixed with respect to the page box only,
+		and are not affected by being seen through a [=viewport=];
+		as in the case of print preview, for example.)
 
-		<pre class="lang-html">
-			&lt;!DOCTYPE html>
-			&lt;html>
-				&lt;head>
-					&lt;title>A frame document with CSS&lt;/title>
-					&lt;style type="text/css" media="screen">
-						body { height: 8.5in } /* Required for percentage heights below */
-						#header {
-							position: fixed;
-							width: 100%;
-							height: 15%;
-							top: 0;
-							right: 0;
-							bottom: auto;
-							left: 0;
-						}
-						#sidebar {
-							position: fixed;
-							width: 10em;
-							height: auto;
-							top: 15%;
-							right: auto;
-							bottom: 100px;
-							left: 0;
-						}
-						#main {
-							position: fixed;
-							width: auto;
-							height: auto;
-							top: 15%;
-							right: 0;
-							bottom: 100px;
-							left: 10em;
-						}
-						#footer {
-							position: fixed;
-							width: 100%;
-							height: 100px;
-							top: auto;
-							right: 0;
-							bottom: 0;
-							left: 0;
-						}
-					&lt;/style>
-				&lt;/head>
-				&lt;body>
-					&lt;div id="header"> ...	&lt;/div>
-					&lt;div id="sidebar"> ...	&lt;/div>
-					&lt;div id="main"> ...	&lt;/div>
-					&lt;div id="footer"> ...	&lt;/div>
-				&lt;/body>
-			&lt;/html>
-		</pre>
-	</div>
+	As a result, parts of [=fixed-positioned boxes=]
+	that extend outside the <a>initial containing block</a>
+	cannot be scrolled to
+	and will not print.
 
 <!-- End section: Fixed positioning -->
 <!-- End section: Positioning schemes -->