[css-grid] Move the z-ordering section to Grid Items, to match placement of similar section in Flexbox.

Author: tabatkins

css-grid/Overview.bs

@@ -709,6 +709,56 @@ Static Position of Grid Container Children</h3>
 	the absolutely-positioned child has no effect on the size of the containing block
 	or layout of its contents.
 
+<h3 id='z-order'>
+Z-axis Ordering: the 'z-index' property</h3>
+
+	<a>Grid items</a> can overlap when they are positioned into intersecting <a>grid areas</a>,
+	or even when positioned in non-intersecting areas because of negative margins or positioning.
+	The painting order of <a>grid items</a> is exactly the same as inline blocks [CSS21],
+	except that <a>order-modified document order</a> is used in place of raw document order,
+	and 'z-index' values other than <a value for=z-index>auto</a> create a stacking context even if 'position' is ''static''.
+	Thus the 'z-index' property can easily be used to control the z-axis order of grid items.
+
+	<p class='note'>
+		Note: Descendants that are positioned outside a grid item still participate in any stacking context established by the grid item.
+
+	<div class="example">
+		The following diagram shows several overlapping grid items,
+		with a combination of implicit source order
+		and explicit 'z-index'
+		used to control their stacking order.
+
+		<figure>
+			<img src="images/drawing-order.png" />
+
+			<figcaption>Drawing order controlled by z-index and source order.</figcaption>
+		</figure>
+
+		<pre>
+			&lt;style type="text/css">
+			  #grid {
+				display: grid;
+				grid-template-columns: 1fr 1fr;
+				grid-template-rows: 1fr 1fr
+			  }
+			  #A { grid-column: 1 / span 2; grid-row: 2; align-self: end; }
+			  #B { grid-column: 1; grid-row: 1; z-index: 10; }
+			  #C { grid-column: 2; grid-row: 1; align-self: start; margin-left: -20px; }
+			  #D { grid-column: 2; grid-row: 2; justify-self: end; align-self: start; }
+			  #E { grid-column: 1 / span 2; grid-row: 1 / span 2;
+				   z-index: 5; justify-self: center; align-self: center; }
+			&lt;/style>
+
+			&lt;div id="grid">
+			  &lt;div id="A">A&lt;/div>
+			  &lt;div id="B">B&lt;/div>
+			  &lt;div id="C">C&lt;/div>
+			  &lt;div id="D">D&lt;/div>
+			  &lt;div id="E">E&lt;/div>
+			&lt;/div>
+		</pre>
+	</div>
+
 <h2 id='grid-definition'>
 The Explicit Grid</h2>
 
@@ -2514,56 +2564,6 @@ Aligning the Grid: the 'justify-content' and 'align-content' properties</h3>
 		</figure>
 	</div>
 
-<h3 id='z-order'>
-Z-axis Ordering: the 'z-index' property</h3>
-
-	<a>Grid items</a> can overlap when they are positioned into intersecting <a>grid areas</a>,
-	or even when positioned in non-intersecting areas because of negative margins or positioning.
-	The painting order of <a>grid items</a> is exactly the same as inline blocks [CSS21],
-	except that <a>order-modified document order</a> is used in place of raw document order,
-	and 'z-index' values other than <a value for=z-index>auto</a> create a stacking context even if 'position' is ''static''.
-	Thus the 'z-index' property can easily be used to control the z-axis order of grid items.
-
-	<p class='note'>
-		Note: Descendants that are positioned outside a grid item still participate in any stacking context established by the grid item.
-
-	<div class="example">
-		The following diagram shows several overlapping grid items,
-		with a combination of implicit source order
-		and explicit 'z-index'
-		used to control their stacking order.
-
-		<figure>
-			<img src="images/drawing-order.png" />
-
-			<figcaption>Drawing order controlled by z-index and source order.</figcaption>
-		</figure>
-
-		<pre>
-			&lt;style type="text/css">
-			  #grid {
-				display: grid;
-				grid-template-columns: 1fr 1fr;
-				grid-template-rows: 1fr 1fr
-			  }
-			  #A { grid-column: 1 / span 2; grid-row: 2; align-self: end; }
-			  #B { grid-column: 1; grid-row: 1; z-index: 10; }
-			  #C { grid-column: 2; grid-row: 1; align-self: start; margin-left: -20px; }
-			  #D { grid-column: 2; grid-row: 2; justify-self: end; align-self: start; }
-			  #E { grid-column: 1 / span 2; grid-row: 1 / span 2;
-				   z-index: 5; justify-self: center; align-self: center; }
-			&lt;/style>
-
-			&lt;div id="grid">
-			  &lt;div id="A">A&lt;/div>
-			  &lt;div id="B">B&lt;/div>
-			  &lt;div id="C">C&lt;/div>
-			  &lt;div id="D">D&lt;/div>
-			  &lt;div id="E">E&lt;/div>
-			&lt;/div>
-		</pre>
-	</div>
-
 <h3 id='grid-baselines'>
 Grid Baselines</h3>