[css-anchor-position-1][editorial] Move sections around for better coherence

Author: fantasai

css-anchor-position-1/Overview.bs

@@ -806,6 +806,57 @@ is ''align-self/normal'':
 	it will shift leftwards to stay visible.
 </div>
 
+
+<!-- Big Text: a-center
+
+ ███▌         ███▌  █████▌ █    █▌ █████▌ █████▌ ████▌
+▐█ ▐█        █▌  █▌ █▌     █▌   █▌   █▌   █▌     █▌  █▌
+█▌  █▌       █▌     █▌     ██▌  █▌   █▌   █▌     █▌  █▌
+█▌  █▌ ████▌ █▌     ████   █▌▐█ █▌   █▌   ████   ████▌
+█████▌       █▌     █▌     █▌  ██▌   █▌   █▌     █▌▐█
+█▌  █▌       █▌  █▌ █▌     █▌   █▌   █▌   █▌     █▌ ▐█
+█▌  █▌        ███▌  █████▌ █▌   ▐▌   █▌   █████▌ █▌  █▌
+-->
+
+Centering on the Anchor: the ''anchor-center'' alignment value {#anchor-center}
+--------------------------------------------------------------
+
+<pre class=propdef>
+Name: justify-self, align-self, justify-items, align-items
+New Values: anchor-center
+</pre>
+
+The [=self-alignment properties=] allow an [=absolutely positioned box=]
+to align itself within the [=inset-modified containing block=].
+The existing values,
+plus carefully chosen [=inset properties=],
+are usually enough for useful alignment,
+but a common case for anchored positioning--
+centering over the [=anchor box=]--
+requires careful and somewhat complex set-up to achieve.
+
+The new <dfn value for="justify-self, align-self, justify-items, align-items">anchor-center</dfn> value
+makes this case extremely simple:
+if the positioned box has a [=default anchor box=],
+then it is centered (insofar as possible)
+over the [=default anchor box=]
+in the relevant axis.
+
+Additionally,
+any ''top/auto'' [=inset properties=] resolve to ''0''.
+
+If the box is not [=absolutely positioned=],
+or does not have a [=default anchor box=],
+this value behaves as ''<self-position>/center''
+and has no additional effect on how [=inset properties=] resolve.
+
+Note: When using ''anchor-center'', by default
+if the anchor is too close to the edge of the box's
+[=original containing block=],
+it will “shift” from being purely centered,
+in order to remain within the [=original containing block=].
+See [[css-align-3#overflow-values]] for more details.
+
 <!-- Big Text: anchor()
 
  ███▌  █    █▌  ███▌  █▌  █▌  ███▌  ████▌    ██ ██  
@@ -817,8 +868,8 @@ is ''align-self/normal'':
 █▌  █▌ █▌   ▐▌  ███▌  █▌  █▌  ███▌  █▌  █▌   ██ ██  
 -->
 
-The ''anchor()'' Function {#anchor-pos}
----------------------------------------------------
+Anchor-relative Insets: the ''anchor()'' function {#anchor-pos}
+-------------------------------------------------
 
 An [=absolutely positioned box=]
 can use the <dfn>anchor()</dfn> function
@@ -989,57 +1040,26 @@ of the [=box fragment|fragments=]' [=border boxes=] is used instead.
 	which input is being referred to.
 </div>
 
+<h4 id=anchor-resolution oldids=anchor-valid>
+Resolution of ''anchor()''</h4>
 
-<!-- Big Text: a-center
-
- ███▌         ███▌  █████▌ █    █▌ █████▌ █████▌ ████▌ 
-▐█ ▐█        █▌  █▌ █▌     █▌   █▌   █▌   █▌     █▌  █▌
-█▌  █▌       █▌     █▌     ██▌  █▌   █▌   █▌     █▌  █▌
-█▌  █▌ ████▌ █▌     ████   █▌▐█ █▌   █▌   ████   ████▌ 
-█████▌       █▌     █▌     █▌  ██▌   █▌   █▌     █▌▐█  
-█▌  █▌       █▌  █▌ █▌     █▌   █▌   █▌   █▌     █▌ ▐█ 
-█▌  █▌        ███▌  █████▌ █▌   ▐▌   █▌   █████▌ █▌  █▌
--->
-
-Centering on the Anchor: the ''anchor-center'' value {#anchor-center}
-------------------------------------------------------------------------
-
-<pre class=propdef>
-Name: justify-self, align-self, justify-items, align-items
-New Values: anchor-center
-</pre>
-
-The [=self-alignment properties=] allow an [=absolutely positioned box=]
-to align itself within the [=inset-modified containing block=].
-The existing values,
-plus carefully chosen [=inset properties=],
-are usually enough for useful alignment,
-but a common case for anchored positioning--
-centering over the [=anchor box=]--
-requires careful and somewhat complex set-up to achieve.
-
-The new <dfn value for="justify-self, align-self, justify-items, align-items">anchor-center</dfn> value
-makes this case extremely simple:
-if the positioned box has a [=default anchor box=],
-then it is centered (insofar as possible)
-over the [=default anchor box=]
-in the relevant axis.
-
-Additionally,
-any ''top/auto'' [=inset properties=] resolve to ''0''.
-
-If the box is not [=absolutely positioned=],
-or does not have a [=default anchor box=],
-this value behaves as ''<self-position>/center''
-and has no additional effect on how [=inset properties=] resolve.
+An ''anchor()'' function is a
+<dfn lt="resolvable anchor function|unresolvable anchor function">resolvable anchor function</dfn>
+only if all the following conditions are true:
 
-Note: When using ''anchor-center'', by default
-if the anchor is too close to the edge of the box's
-[=original containing block=],
-it will “shift” from being purely centered,
-in order to remain within the [=original containing block=].
-See [[css-align-3#overflow-values]] for more details.
+* It's applied to an [=absolutely positioned box=].
+* If its <<anchor-side>> specifies a physical keyword,
+	it's specified in an [=inset property=] applicable to that axis.
+	(For example, ''anchor()/left'' can only be used in 'left', 'right',
+	or a logical [=inset property=] in the horizontal axis.)
+* There is a [=target anchor element=]
+	for the box it's used on,
+	and the <<anchor-name>> value specified in the function.
 
+If any of these conditions are false,
+the ''anchor()'' function [=computed value|computes=] to its specified fallback value.
+If no fallback value is specified,
+it makes the declaration referencing it [=invalid at computed-value time=].
 
 <!-- Big Text: scroll
 
@@ -1260,27 +1280,6 @@ specifically, the [=default anchor element=]:
 </div>
 
 
-Resolution of ''anchor()'' {#anchor-valid}
---------------------------
-
-An ''anchor()'' function is a
-<dfn lt="resolvable anchor function|unresolvable anchor function">resolvable anchor function</dfn>
-only if all the following conditions are true:
-
-* It's applied to an [=absolutely positioned box=].
-* If its <<anchor-side>> specifies a physical keyword,
-	it's specified in an [=inset property=] applicable to that axis.
-	(For example, ''anchor()/left'' can only be used in 'left', 'right',
-	or a logical [=inset property=] in the horizontal axis.)
-* There is a [=target anchor element=]
-	for the box it's used on,
-	and the <<anchor-name>> value specified in the function.
-
-If any of these conditions are false,
-the ''anchor()'' function [=computed value|computes=] to its specified fallback value.
-If no fallback value is specified,
-it makes the declaration referencing it [=invalid at computed-value time=].
-
 <!-- Big Text: visibility
 
 █▌   █▌ ████  ███▌  ████ ████▌  ████ █▌    ████ █████▌ █   ▐▌
@@ -1460,8 +1459,9 @@ to the <<length>> separating the relevant border edges
 whichever is in the specified axis)
 of the [=target anchor element=].
 
-Resolution of anchor-size() {#anchor-size-valid}
----------------------------
+
+<h4 id=anchor-resolution oldids=anchor-valid>
+Resolution of ''anchor-size()''</h4>
 
 An ''anchor-size()'' function is a
 <dfn lt="resolvable anchor-size function|unresolvable anchor-size function">resolvable anchor-size function</dfn>