[css-position-3] Rewrite stickypos section.

Author: fantasai

css-position-3/Overview.bs

@@ -220,17 +220,19 @@ 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">relative positioning</dfn>.
+		<dfn export dfn lt="relative position|relatively position" local-lt="relative|relatively">relative positioning</dfn>.
 
 	<dt><dfn>sticky</dfn>
 	<dd>
 		Identical to ''relative'',
-		except that a offset is automatically adjusted
+		except that its offsets are automatically adjusted
 		in reference to the nearest ancestor [=scroll container's=] [=scrollport=]
-		as modified by the [=inset properties=],
-		in the axes whose [=inset property=] values are not both ''top/auto''.
+		(as modified by the [=inset properties=])
+		in whichever axes the [=inset properties=] are not both ''top/auto'',
+		to try to keep the box in view within its [=containing block=]
+		as the user scrolls.
 		This [=positioning scheme=] is called
-		<dfn export dfn lt="sticky position">sticky positioning</dfn>.
+		<dfn export dfn lt="sticky position" local-lt="sticky">sticky positioning</dfn>.
 
 	<dt><dfn>absolute</dfn>
 	<dd>
@@ -244,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">absolute positioning</dfn>.
+		<dfn export dfn lt="absolute position|absolutely position" local-lt="absolute|absolutely">absolute positioning</dfn>.
 
 	<dt><dfn>fixed</dfn>
 	<dd>
@@ -255,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 positioning</dfn>
+		<dfn export dfn lt="fixed position" local-lt="fixed">fixed positioning</dfn>
 		and is considered a subset of [=absolute positioning=].
 
 		<div class="example">
@@ -556,73 +558,54 @@ Relative Positioning</h3>
 <h3 id="sticky-pos">
 Sticky positioning</h3>
 
-	A [=sticky positioned=] box
-	is positioned similarly to a <a>relatively positioned</a> box,
-	but the offset is computed with reference to the nearest ancestor with a <a>scrolling box</a>,
-	or the viewport if no ancestor has a <a>scrolling box</a>.
-
-	Specifically, once a box has been laid out according to the <a>normal flow</a> or <a>floated</a>,
-	its sticky offset is computed as described below.
-	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 sticky positioning may cause boxes to overlap.
-	However, if sticky 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.
-
-	A sticky positioned box keeps its <a>normal flow</a> size,
-	including line breaks and the space originally reserved for it.
-
-	A sticky positioned box establishes a new <a>containing block</a> for absolutely positioned descendants,
-	just as relative positioning does.
-	The section on <a>containing blocks</a> explains when a sticky positioned box establishes a new <a>containing block</a>.
-
-	For sticky positioned elements,
-	'left', 'right', 'top' and 'bottom'
-	are offsets from the respective edges of its flow box
-	which are used to constrain the element's offset.
-	Percentage values of 'left' and 'right' refer to the width of its flow box;
-	percentage values of 'top' and 'bottom' refer to the height of its flow box.
-
-	Issue: Describe which element font-size-relative units are resolved against
-
-	The offset of a sticky positioned box is computed as follows:
-
-	1. A rectangle is computed relative to the containing block of the sticky positioned element,
-		by insetting its flow box rectangle on each side
-		by offsets computed from the 'left', 'right', 'top' and 'bottom' properties of the sticky positioned element.
-
-		Issue: Say what happens if this rectangle is empty
-
-	2. The intersection is taken between the resulting rectangle
-		and the containing block of the sticky positioned element.
-		The result, termed the the <dfn export>sticky-constraint rectangle</dfn>,
-		is a rectangle used to constrain the location of the sticky positioned element.
-
-	3. If the sticky positioned element's 'top' style is not ''top/auto'',
-		and the sticky positioned element projects above the top of the [=sticky-constraint rectangle=],
-		the sticky positioned element is moved down
-		until it is fully contained in the [=sticky-constraint rectangle=].
-
-	4. If the sticky positioned element's 'bottom' style is not ''bottom/auto'',
-		and the sticky positioned element projects below the bottom of the [=sticky-constraint rectangle=],
-		the sticky positioned element is moved up
-		until it is fully contained in the [=sticky-constraint rectangle=].
-
-	5. If the sticky positioned element's 'left' style is not ''left/auto'',
-		and the stickily positioned element projects outside the left of the [=sticky-constraint rectangle=],
-		the sticky positioned element is moved right
-		until it is fully contained in the [=sticky-constraint rectangle=].
-
-	6. If the sticky positioned element's 'right' style is not ''right/auto'',
-		and the stickily positioned element projects outside the right of the [=sticky-constraint rectangle=],
-		the sticky positioned element is moved left
-		until it is fully contained in the [=sticky-constraint rectangle=].
-
-	When computing containment of the sticky positioned element
-	within its containing block,
-	margins on the sticky positioned element are taken into account.
+	[=Sticky positioning=] is similar to [=relative positioning=]
+	except the offsets are automatically calculated
+	in reference to the [=nearest scrollport=].
+
+	For a [=sticky positioned=] [=box=],
+	the [=inset properties=] 
+	represent insets from the respective edges of the [=nearest scrollport=],
+	defining the <dfn export>sticky view rectangle</dfn>
+	used to constrain the box’s position.
+	(For this purpose an ''top/auto'' value represents a zero inset.)
+	If this results in a [=sticky view rectangle=] size in any axis
+	less than the size of the [=border box=] of the [=sticky=] box in that axis,
+	then the effective end-edge inset in the affected axis is reduced
+	to bring the [=sticky view rectangle=]’s size up to
+	the size of the [=border box=] in that axis.
+
+	<div class=example>
+		For example,
+		if the [=nearest scrollport=] is ''300px'' tall,
+		the [=sticky=] box's [=border box=] is ''200px'' tall,
+		and it has ''top: 20px'',
+		then the top-edge inset of the [=nearest scrollport=] is ''20px'',
+		and the bottom-edge inset is ''0px'',
+		yielding a [=sticky view rectangle=] that is ''280px'' tall.
+
+		But if the [=nearest scrollport=] were only ''100px'' tall,
+		then the effective bottom-edge inset becomes ''-120px'',
+		resulting in a [=sticky view rectangle=] that’s ''200px'' tall,
+		enough to fully contain the [=margin box=] of the [=sticky=] box.
+	</div>
+
+	For each side of the box,
+	if the corresponding [=inset property=] is not ''top/auto'',
+	and the corresponding [=border edge=] of the box would be outside
+	the corresponding edge of the [=sticky viewport rectangle=],
+	then the box must be visually shifted (as for relative positioning)
+	to be inward of that [=sticky viewport rectangle=] edge,
+	insofar as it can while its [=margin box=] remains contained
+	within its [=containing block=].
+
+	Note: A sticky positioned element with
+	a non-''auto'' 'top' value and an ''auto'' 'bottom' value
+	will only ever be pushed down by sticky positioning;
+	it will never be offset upwards.
+
+	Note: Multiple [=sticky positioned=] boxes in the same container
+	are offset independently,
+	and therefore might overlap.
 
 	Issue: Say what happens if it already overflows the containing block
 
@@ -633,32 +616,9 @@ Sticky positioning</h3>
 		Does it involve collapsing between the sticky element and
 		its descendants, siblings, and/or ancestors?
 
-		Intersection between the sticky positioned element
-		and the bottom of the [=sticky-constraint rectangle=]
-		limits movement in any direction,
-		so the offset never pushes the sticky positioned element outside of its containing block.
-		However, when the element is free to move within its containing block as the page is scrolled,
-		it appears to be pinned to the relevant flow root edges,
-		similarly to a fixed position element.
-
-		Note: A sticky positioned element with non-auto 'top' style and auto 'bottom' style
-		will only ever be pushed down by sticky positioning;
-		it will never be offset upwards.
-
-		Note: Multiple sticky positioned elements in the same container are offset independently.
-		Sticky position offsets may cause them to overlap.
-
-		Issue: Does the margin on the sticky positioned element affect its distance from the flow root edge?
-
-		Issue: Sticky positioning should really be defined in terms of the nearest scrollable ancestor,
-		but there is currently no such term defined elsewhere in CSS.
-		CSSOM View refers to "scrolling boxes."
-		CSS Overflow has yet to pull in the relevant text from CSS Box,
-		and CSS Box has an old, confusing definition of "flow root"
-		which is almost (but probably not quite) what we want here.
-		This spec refers to "flow root",
-		since that's the closest thing currently specced somewhere,
-		but this is not optimal.
+	Issue: Does the margin on the sticky positioned element
+	affect its distance from the flow root edge?
+
 <!-- End section: Sticky positioning	-->
 
 <h3 id="abs-pos">