[css-grid] Clarifications to z-index. <http://lists.w3.org/Archives/Public/www-style/2014Feb/0288.html>

Author: fantasai

css-grid/Overview.bs

@@ -2425,14 +2425,12 @@ Aligning the Grid: the 'justify-content' and 'align-content' properties</h3>
 <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>.
-	<a>Grid item</a> boxes in non-intersecting areas can also overlap because of negative margins or positioning.
-
-	When <a>grid items</a> overlap,
-	the 'z-index' property provides control over the drawing order of <a>grid items</a>.
-	<a>Grid items</a> paint <a href="http://www.w3.org/TR/css3-flexbox/#painting">exactly the same as flex items</a> [[!CSS3-FLEXBOX]]:
-	they use <a>order-modified document order</a>,
+	<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 <i>grid items</i> is exactly the same as inline blocks [CSS21],
+	except that <i>order-modified document order</i> 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.

css-grid/Overview.html

@@ -2401,14 +2401,12 @@ <h3 class="heading settled heading" data-level=9.4 id=grid-align><span class=sec
 <h3 class="heading settled heading" data-level=9.5 id=z-order><span class=secno>9.5 </span><span class=content>
 Z-axis Ordering: the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-position-3/#z-index title=z-index>z-index</a> property</span><a class=self-link href=#z-order></a></h3>
 
-<p>	<a data-link-type=dfn href=#grid-item title="grid items">Grid items</a> can overlap when they are positioned into intersecting <a data-link-type=dfn href=#grid-area title="grid areas">grid areas</a>.
-	<a data-link-type=dfn href=#grid-item title="grid item">Grid item</a> boxes in non-intersecting areas can also overlap because of negative margins or positioning.
-
-<p>	When <a data-link-type=dfn href=#grid-item title="grid items">grid items</a> overlap,
-	the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-position-3/#z-index title=z-index>z-index</a> property provides control over the drawing order of <a data-link-type=dfn href=#grid-item title="grid items">grid items</a>.
-	<a data-link-type=dfn href=#grid-item title="grid items">Grid items</a> paint <a href=http://www.w3.org/TR/css3-flexbox/#painting>exactly the same as flex items</a> <a data-biblio-type=normative data-link-type=biblio href=#css3-flexbox title=css3-flexbox>[CSS3-FLEXBOX]</a>:
-	they use <a data-link-type=dfn href=http://dev.w3.org/csswg/css-flexbox-1/#order-modified-document-order title="order-modified document order">order-modified document order</a>,
+<p>	<a data-link-type=dfn href=#grid-item title="grid items">Grid items</a> can overlap when they are positioned into intersecting <a data-link-type=dfn href=#grid-area title="grid areas">grid areas</a>,
+	or even when positioned in non-intersecting areas because of negative margins or positioning.
+	The painting order of <a data-link-type=dfn href=#grid-item title="grid items">grid items</a> is exactly the same as inline blocks [CSS21],
+	except that <a data-link-type=dfn href=http://dev.w3.org/csswg/css-flexbox-1/#order-modified-document-order title="order-modified document order">order-modified document order</a> is used in place of raw document order,
 	and <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-position-3/#z-index title=z-index>z-index</a> values other than <a class=css-code data-link-for=z-index data-link-type=value title=auto>auto</a> create a stacking context even if <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-position-3/#position title=position>position</a> is <span class=css data-link-type=maybe title=static>static</span>.
+	Thus the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-position-3/#z-index title=z-index>z-index</a> 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.
@@ -3617,11 +3615,11 @@ <h2 class="no-num no-ref heading settled heading" id=references><span class=cont
 
 <h3 class="no-num no-ref heading settled heading" id=normative><span class=content>
 Normative References</span><a class=self-link href=#normative></a></h3>
-<div data-fill-with=normative-references><dl><dt id=css21 title=CSS21><a class=self-link href=#css21></a>[CSS21]<dd>Bert Bos; et al. <a href=http://www.w3.org/TR/2011/REC-CSS2-20110607>Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</a>. 7 June 2011. W3C Recommendation. URL: <a href=http://www.w3.org/TR/2011/REC-CSS2-20110607>http://www.w3.org/TR/2011/REC-CSS2-20110607</a><dt id=css3-align title=CSS3-ALIGN><a class=self-link href=#css3-align></a>[CSS3-ALIGN]<dd>Elika J. Etemad; Tab Atkins Jr.. <a href=http://www.w3.org/TR/2013/WD-css3-align-20130514/>CSS Box Alignment Module Level 3</a>. 14 May 2013. W3C Working Draft. (Work in progress.) URL: <a href=http://www.w3.org/TR/2013/WD-css3-align-20130514/>http://www.w3.org/TR/2013/WD-css3-align-20130514/</a><dt id=css3-flexbox title=CSS3-FLEXBOX><a class=self-link href=#css3-flexbox></a>[CSS3-FLEXBOX]<dd>Tab Atkins Jr.; Elika J. Etemad; Alex Mogilevsky. <a href=http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/>CSS Flexible Box Layout Module</a>. 18 September 2012. W3C Candidate Recommendation. (Work in progress.) URL: <a href=http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/>http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/</a><dt id=css3-writing-modes title=CSS3-WRITING-MODES><a class=self-link href=#css3-writing-modes></a>[CSS3-WRITING-MODES]<dd>Elika J. Etemad; Koji Ishii. <a href=http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/>CSS Writing Modes Module Level 3</a>. 15 November 2012. W3C Working Draft. (Work in progress.) URL: <a href=http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/>http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/</a><dt id=css3val title=CSS3VAL><a class=self-link href=#css3val></a>[CSS3VAL]<dd>Håkon Wium Lie; Tab Atkins; Elika J. Etemad. <a href=http://www.w3.org/TR/2013/CR-css3-values-20130730/>CSS Values and Units Module Level 3</a>. 30 July 2013. W3C Candidate Recommendation. (Work in progress.) URL: <a href=http://www.w3.org/TR/2013/CR-css3-values-20130730/>http://www.w3.org/TR/2013/CR-css3-values-20130730/</a><dt id=rfc2119 title=RFC2119><a class=self-link href=#rfc2119></a>[RFC2119]<dd>S. Bradner. <a href=http://www.ietf.org/rfc/rfc2119.txt>Key words for use in RFCs to Indicate Requirement Levels</a>. URL: <a href=http://www.ietf.org/rfc/rfc2119.txt>http://www.ietf.org/rfc/rfc2119.txt</a></dl></div>
+<div data-fill-with=normative-references><dl><dt id=css21 title=CSS21><a class=self-link href=#css21></a>[CSS21]<dd>Bert Bos; et al. <a href=http://www.w3.org/TR/2011/REC-CSS2-20110607>Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</a>. 7 June 2011. W3C Recommendation. URL: <a href=http://www.w3.org/TR/2011/REC-CSS2-20110607>http://www.w3.org/TR/2011/REC-CSS2-20110607</a><dt id=css3-align title=CSS3-ALIGN><a class=self-link href=#css3-align></a>[CSS3-ALIGN]<dd>Elika J. Etemad; Tab Atkins Jr.. <a href=http://www.w3.org/TR/2013/WD-css3-align-20130514/>CSS Box Alignment Module Level 3</a>. 14 May 2013. W3C Working Draft. (Work in progress.) URL: <a href=http://www.w3.org/TR/2013/WD-css3-align-20130514/>http://www.w3.org/TR/2013/WD-css3-align-20130514/</a><dt id=css3-writing-modes title=CSS3-WRITING-MODES><a class=self-link href=#css3-writing-modes></a>[CSS3-WRITING-MODES]<dd>Elika J. Etemad; Koji Ishii. <a href=http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/>CSS Writing Modes Module Level 3</a>. 15 November 2012. W3C Working Draft. (Work in progress.) URL: <a href=http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/>http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/</a><dt id=css3val title=CSS3VAL><a class=self-link href=#css3val></a>[CSS3VAL]<dd>Håkon Wium Lie; Tab Atkins; Elika J. Etemad. <a href=http://www.w3.org/TR/2013/CR-css3-values-20130730/>CSS Values and Units Module Level 3</a>. 30 July 2013. W3C Candidate Recommendation. (Work in progress.) URL: <a href=http://www.w3.org/TR/2013/CR-css3-values-20130730/>http://www.w3.org/TR/2013/CR-css3-values-20130730/</a><dt id=rfc2119 title=RFC2119><a class=self-link href=#rfc2119></a>[RFC2119]<dd>S. Bradner. <a href=http://www.ietf.org/rfc/rfc2119.txt>Key words for use in RFCs to Indicate Requirement Levels</a>. URL: <a href=http://www.ietf.org/rfc/rfc2119.txt>http://www.ietf.org/rfc/rfc2119.txt</a></dl></div>
 
 <h3 class="no-num no-ref heading settled heading" id=informative><span class=content>
 Informative References</span><a class=self-link href=#informative></a></h3>
-<div data-fill-with=informative-references><dl></dl></div>
+<div data-fill-with=informative-references><dl><dt id=css3-flexbox title=CSS3-FLEXBOX><a class=self-link href=#css3-flexbox></a>[CSS3-FLEXBOX]<dd>Tab Atkins Jr.; Elika J. Etemad; Alex Mogilevsky. <a href=http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/>CSS Flexible Box Layout Module</a>. 18 September 2012. W3C Candidate Recommendation. (Work in progress.) URL: <a href=http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/>http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/</a></dl></div>
 
 <h2 class="no-num no-ref heading settled heading" id=index><span class=content>
 Index</span><a class=self-link href=#index></a></h2>