[css-tables] Added abspos clarifications

Author: FremyCompany

css-tables-3/Overview.bs

@@ -2282,6 +2282,79 @@ spec:css22; type:property; text:display
 			<a class="hint" href="https://jsfiddle.net/3pox7b4f/5/">Testcase</a>
 		</div>
 
+<!--
+   ███    ████████   ██████  ████████   ███████   ██████
+  ██ ██   ██     ██ ██    ██ ██     ██ ██     ██ ██    ██
+ ██   ██  ██     ██ ██       ██     ██ ██     ██ ██
+██     ██ ████████   ██████  ████████  ██     ██  ██████
+█████████ ██     ██       ██ ██        ██     ██       ██
+██     ██ ██     ██ ██    ██ ██        ██     ██ ██    ██
+██     ██ ████████   ██████  ██         ███████   ██████
+-->
+
+<h2 id="abspos">
+Absolute Positioning</h2>
+
+<h3 id="abspos-boxes-in-table-root">
+With a table-root as containing block</h3>
+
+	If an absolutely positioned element's <a>containing block</a>
+	is generated by a <a>table-wrapper</a> box,
+	the containing block corresponds to the area around which the table margins are applied,
+	including the area where the table border is drawn and the margin area of any table-caption.
+	The offset properties ('top'/'right'/'bottom'/'left')
+	then indicate offsets inwards from the corresponding edges
+	of this <a>containing block</a>, as normal.
+
+	Absolute positioning occurs after layout of the <a>table</a> and its in-flow contents,
+	and does not contribute to the sizing of any table grid tracks
+	or affect the size/configuration of the table grid in any way.
+
+	<div class='example'>
+
+		<figure style="margin: 0">
+			<figcaption style="text-align: left; font-style: normal;">
+				The figure below shows how a box absolutely-positioned relative to a table should be rendred. <br/><br>
+				The <b>yellow</b> area is the table content edge, yellow arrows the table margins. <br/>
+				The <b>green</b> area is the table caption, green arrows the caption margins. <br/>
+				The <b>blue</b> area is the table background area, and the darker blue area where the table border area. <br/>
+				The <b>black</b> area is the descendant positioned relative to the table, the arrows represent the top/left/bottom/right displacements.
+			</figcaption>
+			<img src="images/css-tables-abspos.svg" width="702" height="402" alt=''>
+		</figure>
+
+	</div>
+
+<h3 id="abspos-boxes-in-table-internal">
+With a table-track or table-track-group as containing block</h3>
+
+	If an absolutely positioned element's <a>containing block</a>
+	is generated by a <a>table-internal</a>,
+	the containing block corresponds to <a href="#bounding-box-assignment">the area defined for the box during layout</a>,
+	(these elements cannot have a border or padding, so they always refer to that area in its entirety).
+
+	The offset properties ('top'/'right'/'bottom'/'left')
+	then indicate offsets inwards from the corresponding edges
+	of this <a>containing block</a>, as normal.
+
+	ISSUE(858): This only works in Firefox. It would make it easier to implement position:sticky in the future, though.
+	<a href="https://bugs.chromium.org/p/chromium/issues/detail?id=417223">[Chrome bug]</a>
+	<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1289682">[Interop risk: Firefox bug]</a>
+
+
+<h3 id="static-position">
+With a table-internal box as non-containing block parent</h3>
+
+	The only influence of non-containing block parent of an absolutely-positioned box is to define its static position,
+	in case both top+bottom and/or left+right end up being auto.
+
+	For table-cells, the absolutely-positioned content is positioned follows the rules for block layout as usual.
+
+	Due to <a href="#fixup">table fixup</a>, 
+	it is not possible to create an absolutely-positioned box 
+	that is the child of a table-internal box that is not a table-cell 
+	(see note about float and position for more details).
+
 <!--
 ████████  ████████ ██    ██ ████████  ████████ ████████  ████ ██    ██  ██████
 ██     ██ ██       ███   ██ ██     ██ ██       ██     ██  ██  ███   ██ ██    ██