Skip to content

Commit ba747f5

Browse files
committed
[css-position-3] Rewrite abspos layout rules Part 1: define inset-modified containing block.
1 parent 0c37437 commit ba747f5

1 file changed

Lines changed: 46 additions & 8 deletions

File tree

css-position-3/Overview.bs

Lines changed: 46 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -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 &times; |<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 &times; |<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">
635673
Fragmenting 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">
697735
The Width of Absolutely-Positioned, Non-Replaced Elements</h3>

0 commit comments

Comments
 (0)