[css-position-3] Rewrite relpos section.

Author: fantasai

css-position-3/Overview.bs

@@ -497,54 +497,37 @@ Box Insets Shorthands: the 'inset-block', 'inset-inline', and 'inset' properties
 	exactly as the 'margin' property does for its longhands.
 
 
-<h3 id="rel-pos">
-Relative positioning</h3>
+<h3 id="relpos">
+Relative Positioning</h3>
 
-	Once a box has been laid out according to the <a>normal flow</a> or <a>floated</a>,
-	it may be offset relative to this position.
 
-	This is called [=relative positioning=]
-	Offsetting a box (B1) in this way has no effect on the box (B2) that follows:
-	B2 is given a position as if B1 were not offset
-	and B2 is not re-positioned after B1’s offset is applied.
-	This implies that relative positioning may cause boxes to overlap.
-	However, if relative positioning causes an ''overflow: auto'' or ''overflow: scroll'' box to have overflow,
-	the user agent must allow the user to access this content (at its offset position),
-	which, through the creation of a scrolling mechanism, may affect layout.
+	For a [=relatively positioned=] box,
+	the [=inset properties=] move the box inward
+	from the respective edge,
+	without changing its size.
+	'left' moves the box to the right, 'right' moves it to the left, etc.
+	Since boxes are not split or stretched as a result of [=relative positioning=]
+	opposing [=used values=] in a given axis must be negations of each other:
 
-	A relatively positioned box keeps its <a>normal flow</a> size,
-	including line breaks and the space originally reserved for it.
+	<ul>
+		<li>
+			If opposing [=inset properties=] in an axis both compute to 'auto'
+			(their [=initial values=]),
+			their [=used values=] are zero
+			(i.e., the boxes stay in their original position in that axis).
+
+		<li>
+			If only one is ''auto'',
+			its [=used value=] becomes the negation of the other,
+			and the box is shifted by the specified amount.
+
+		<li>
+			If neither is ''auto'',
+			the position is over-constrained;
+			the [=computed value|computed=] [=end=] side value is ignored,
+			and its [=used value=] becomes the negation of the [=start=] side.
+	</ul>
 
-	A relatively positioned box establishes a new <a>containing block</a> for absolutely positioned descendants.
-	(This is a common use of relatively positioned boxes.)
-	The section on <a>containing blocks</a>
-	explains when a relatively positioned box establishes a new <a>containing block</a>.
-
-	For relatively positioned elements,
-	'left' and 'right' move the box(es) horizontally,
-	without changing their size.
-	'left' moves the boxes to the right, and 'right' moves them to the left.
-	Since boxes are not split or stretched as a result of 'left' or 'right',
-	the used values are always: left = -right.
-
-	If both 'left' and 'right' are ''left/auto'' (their initial values),
-	the used values are ''0''
-	(i.e., the boxes stay in their original position).
-
-	If 'left' is ''left/auto'',
-	its used value is minus the value of 'right'
-	(i.e., the boxes move to the left by the value of 'right').
-
-	If 'right' is specified as ''right/auto'',
-	its used value is minus the value of 'left'.
-
-	If neither 'left' nor 'right' is ''left/auto'',
-	the position is over-constrained,
-	and one of them has to be ignored.
-	If the 'direction' property of the <a>containing block</a> is ''ltr'',
-	the value of 'left' wins and 'right' becomes -'left'.
-	If 'direction' of the containing block is ''rtl'',
-	'right' wins and 'left' is ignored.
 
 	<div class="example">
 
@@ -557,48 +540,14 @@ Relative positioning</h3>
 		</pre>
 	</div>
 
-	The 'top' and 'bottom' properties move relatively positioned element(s) up or
-	down without changing their size. 'Top' moves the boxes down, and 'bottom' moves
-	them up. Since boxes are not split or stretched as a result of 'top' or 'bottom',
-	the used values are always: top = -bottom.
-
-	If 'top' and 'bottom' are ''top/auto'',
-	their used values are both ''0''.
-
-	If one of them, 'top' or 'bottom', is ''top/auto'',
-	the ''top/auto'' value becomes the negative of the other.
-
-	If neither 'top' and 'bottom' is ''top/auto'',
-	'bottom' is ignored
-	(i.e., the used value of 'bottom' will be minus the value of 'top').
-
-	Note: Although relative positioning could be used as a form of superscripting and subscripting,
-	the line height is not automatically adjusted to take the positioning into consideration.
-	See the description of <a href="https://www.w3.org/TR/CSS2/visudet.html#line-height">line height calculations</a>
-	for more information.
-
-<h4 id='relpos-tables'>
-Effects of Relative Positioning On Table Elements</h4>
-
-	The effect of ''position: relative'' on table elements is defined as follows:
-
-	: table-row-group
-	: table-header-group
-	: table-footer-group
-	: table-row
-	:: offset relative to its normal position within the table.
-		If table-cells span multiple rows,
-		only the cells originating in the <a>relative positioned</a> row are offset.
-
-	: table-column-group
-	: table-column
-	:: do not offset the respective column
-		and has no visual affect when ''position: relative'' is applied.
+	If specified on
+	a ''table-row-group'', ''table-header-group'', ''table-footer-group'', or ''table-row'' [=box=]
+	the shift affects all the contents of the box,
+	including all [=table cells=] that originate in the affected row,
+	but not those that don't.
 
-	: table-caption
-	: table-cell
-	:: offset relative to its normal position within the table.
-		If a table cell spans multiple columns or rows the full spanned cell is offset.
+	Note: Since 'position' does not apply to ''table-column-group'' or ''table-column'' boxes,
+	they are not affected by [=relative positioning=].
 
 <!-- End section: Relative positioning	-->