[css-flexbox] Restore text explaining goal of static pos rules, clarify margin box vs content box

Author: tabatkins

css-flexbox/Overview.bs

@@ -618,28 +618,38 @@ Absolutely-Positioned Flex Children</h3>
 	beyond the <a href="#algo-flex-order">reordering step</a>.
 
 	The static position of an absolutely-positioned child of a <a>flex container</a>
-	is determined by the 'justify-*'/'align-*' properties set on the <a>flex container</a> and the child:
+	is determined such that the child is positioned
+	as if it were the sole <a>flex item</a> in the <a>flex container</a>,
+	assuming both the child and the flex container
+	were fixed-size boxes of their used size.
+
+	In other words,
+	if the static position were conceived of as a point to which the absolutely-positioned element is aligned,
+	the static position of an absolutely-positioned child of a <a>flex container</a>
+	is determined by the alignment properties set on the <a>flex container</a> and the child
+	as if it were a zero-height, zero-width only-child in-flow flex item.
+	Furthermore, the absolutely-positioned child aligns itself in the given axis
+	to the static position in the same way:
 
 	<dl>
+
 		<dt>In the <a>main axis</a>
 		<dd>
 			If the <a>flex container's</a> 'justify-content' value
-			would distribute a single <a>flex item</a>
+			would align a single <a>flex item</a>
 			to the start, center, or end side of the <a>main axis</a>,
-			the static position in the <a>main axis</a> is the start, center, or end respectively.
+			the static position in the <a>main axis</a> is the start, center, or end of the flex container's content box, respectively,
+			and the absolutely-positioned box aligns its outer start, center, or end to the static position point, respectively.
 
 		<dt>In the <a>cross axis</a>
 		<dd>
 			If the child's 'align-self' value,
 			if specified on a hypothetical single <a>flex item</a> child of the <a>flex container</a>,
 			would align that hypothetical child to the start, center, or end side of the <a>cross axis</a>,
-			the static position in the <a>cross axis</a> is the start, center, or end respectively.
+			the static position in the <a>cross axis</a> is the start, center, or end of the flex container's content box, respectively,
+			and the absolutely-positioned box aligns its outer start, center, or end to the static position point, respectively.
 	</dl>
 
-	Further, the absolutely-positioned child aligns its start, center, or end in the given axis
-	(whichever position the static position was set to)
-	to the static position.
-
 	<div class='example'>
 		The effect of this is that if you set, for example,
 		''align-content: center;'' on an absolutely-positioned child of a <a>flex container</a>,

css-flexbox/Overview.html

@@ -771,28 +771,38 @@ <h3 class="heading settled heading" data-level=4.1 id=abspos-items><span class=s
 	beyond the <a href=#algo-flex-order>reordering step</a>.</p>
 
 <p>The static position of an absolutely-positioned child of a <a data-link-type=dfn href=#flex-container title="flex container">flex container</a>
-	is determined by the <a class=property data-link-type=propdesc title=justify-*>justify-*</a>/<a class=property data-link-type=propdesc title=align-*>align-*</a> properties set on the <a data-link-type=dfn href=#flex-container title="flex container">flex container</a> and the child:</p>
+	is determined such that the child is positioned
+	as if it were the sole <a data-link-type=dfn href=#flex-item title="flex item">flex item</a> in the <a data-link-type=dfn href=#flex-container title="flex container">flex container</a>,
+	assuming both the child and the flex container
+	were fixed-size boxes of their used size.</p>
+
+<p>In other words,
+	if the static position were conceived of as a point to which the absolutely-positioned element is aligned,
+	the static position of an absolutely-positioned child of a <a data-link-type=dfn href=#flex-container title="flex container">flex container</a>
+	is determined by the alignment properties set on the <a data-link-type=dfn href=#flex-container title="flex container">flex container</a> and the child
+	as if it were a zero-height, zero-width only-child in-flow flex item.
+	Furthermore, the absolutely-positioned child aligns itself in the given axis
+	to the static position in the same way:</p>
 
 	<dl>
+
 		<dt>In the <a data-link-type=dfn href=#main-axis title="main axis">main axis</a>
 		<dd>
 			If the <a data-link-type=dfn href=#flex-container title="flex container’s">flex container’s</a> <a class=property data-link-type=propdesc href=#propdef-justify-content title=justify-content>justify-content</a> value
-			would distribute a single <a data-link-type=dfn href=#flex-item title="flex item">flex item</a>
+			would align a single <a data-link-type=dfn href=#flex-item title="flex item">flex item</a>
 			to the start, center, or end side of the <a data-link-type=dfn href=#main-axis title="main axis">main axis</a>,
-			the static position in the <a data-link-type=dfn href=#main-axis title="main axis">main axis</a> is the start, center, or end respectively.
+			the static position in the <a data-link-type=dfn href=#main-axis title="main axis">main axis</a> is the start, center, or end of the flex container’s content box, respectively,
+			and the absolutely-positioned box aligns its outer start, center, or end to the static position point, respectively.
 
 		<dt>In the <a data-link-type=dfn href=#cross-axis title="cross axis">cross axis</a>
 		<dd>
 			If the child’s <a class=property data-link-type=propdesc href=#propdef-align-self title=align-self>align-self</a> value,
 			if specified on a hypothetical single <a data-link-type=dfn href=#flex-item title="flex item">flex item</a> child of the <a data-link-type=dfn href=#flex-container title="flex container">flex container</a>,
 			would align that hypothetical child to the start, center, or end side of the <a data-link-type=dfn href=#cross-axis title="cross axis">cross axis</a>,
-			the static position in the <a data-link-type=dfn href=#cross-axis title="cross axis">cross axis</a> is the start, center, or end respectively.
+			the static position in the <a data-link-type=dfn href=#cross-axis title="cross axis">cross axis</a> is the start, center, or end of the flex container’s content box, respectively,
+			and the absolutely-positioned box aligns its outer start, center, or end to the static position point, respectively.
 	</dl>
 
-<p>Further, the absolutely-positioned child aligns its start, center, or end in the given axis
-	(whichever position the static position was set to)
-	to the static position.</p>
-
 	<div class=example>
 		The effect of this is that if you set, for example,
 		<a class=css data-link-type=propdesc href=#propdef-align-content title=align-content>align-content: center;</a> on an absolutely-positioned child of a <a data-link-type=dfn href=#flex-container title="flex container">flex container</a>,