@@ -19,6 +19,7 @@ Link Defaults: css-transforms-1 (property) transform
1919</pre>
2020
2121<style type="text/css">
22+ .switch > dt { font: inherit; }
2223 .cb-example-table {
2324 border: 1px solid;
2425 border-collapse: collapse;
@@ -616,20 +617,57 @@ Sticky positioning</h3>
616617<!-- End section: Sticky positioning -->
617618
618619<h3 id="abs-pos">
619- Absolute positioning </h3>
620+ Absolute Positioning </h3>
620621
621622 For an [=absolutely positioned=] box,
622623 the [=inset properties=] effectively reduce the [=containing block=]
623- into which it is sized and positioned.
624+ into which it is sized and positioned
625+ by the specified amounts.
626+
627+ If only one [=inset property=] in a given axis is ''top/auto'' ,
628+ it is set to zero.
629+ If both [=inset properties=] in a given axis are ''top/auto'' , then,
630+ depending on the box’s [=self-alignment property=] in the relevant axis:
631+ <dl class=switch>
632+ <dt> for ''align-self/self-start'' alignment or its equivalent
633+ <dd>
634+ Set its start-edge [=inset property=] to the static position,
635+ and its end-edge [=inset property=] to zero.
636+
637+ <dt> for ''align-self/self-end'' alignment or its equivalent
638+ <dd>
639+ Set its end-edge [=inset property=] to the static position,
640+ and its start-edge [=inset property=] to zero.
641+
642+ <dt> for ''align-self/center'' alignment
643+ <dd>
644+ Let <var> start distance</var> be the distance from
645+ the center of its [=static position rectangle=]
646+ to the start edge of its [=containing block=] ,
647+ and <var> end distance</var> be the distance from
648+ the center of its [=static position rectangle=]
649+ to the end edge of its [=containing block=] .
650+ If <var> start distance</var> is less than or equal to <var> end distance</var> ,
651+ then set the start-edge [=inset property=] to zero,
652+ and set the end-edge [=inset property=] to
653+ (<var> containing block size</var> - 2 × |<var> start distance</var> |);
654+ otherwise,
655+ set the end-edge [=inset property=] to zero
656+ and the start-edge [=inset property=] to
657+ (<var> containing block size</var> - 2 × |<var> end distance</var> |).
658+ </dl>
624659
625- If this results in an effective [=containing block=] size in any axis
626- less than zero,
627- then the effective end-edge inset in the affected axis
660+ If these adjustments result in
661+ an effective [=containing block=] size in any axis less than zero,
662+ then the weaker inset in the affected axis
628663 is reduced to bring that size up to zero.
664+ In the case that only one inset is ''auto'' ,
665+ that is the weaker inset;
666+ otherwise the weaker inset is the end-edge inset.
629667
630668 Sizing and positioning of the [=absolutely positioned box=]
631669 into this <dfn>inset-modified containing block</dfn>
632- is as described in [[#size-and-position-details ]] .
670+ is as described in [[#abspos-layout ]] .
633671
634672<h4 id="breaking">
635673Fragmenting Absolutely-positioned Elements</h4>
@@ -690,8 +728,8 @@ Fixed positioning</h3>
690728<!-- End section: Positioning schemes -->
691729
692730
693- <h2 id="size-and-position-details ">
694- Sizing and positioning details </h2>
731+ <h2 id="abspos-layout ">
732+ Absolute Positioning Layout Model </h2>
695733
696734<h3 id="abs-non-replaced-width">
697735The Width of Absolutely-Positioned, Non-Replaced Elements</h3>
0 commit comments