Skip to content

Commit 60099b6

Browse files
fantasaifantasai
committed
[css-position-3] Move sections.
1 parent 440c099 commit 60099b6

1 file changed

Lines changed: 112 additions & 111 deletions

File tree

‎css-position-3/Overview.bs‎

Lines changed: 112 additions & 111 deletions
Original file line numberDiff line numberDiff line change
@@ -376,6 +376,118 @@ Containing Blocks of Positioned Boxes</h3>
376376
</div>
377377

378378
<!-- End section: Containing blocks -->
379+
<!-- End section: Choosing a positioning scheme: 'position' property -->
380+
381+
<h2 id="coords">
382+
Positioning Coordinates</h2>
383+
384+
The precise location of a [=positioned box=] is controlled by
385+
the <dfn>inset properties</dfn>:
386+
the [=physical=] [=inset properties=] 'top', 'right', 'bottom', 'left';
387+
the [=flow-relative=] [=inset properties=] 'inset-block-start', 'inset-inline-start', 'inset-block-end', and 'inset-inline-end';
388+
and their [=shorthands=], 'inset-block', 'inset-inline', and 'inset'.
389+
390+
The interpretation of these specified coordinates varies by [=positioning scheme=]:
391+
392+
* for [=absolute positioning=], the [=inset properties=] represent
393+
insets from the containing block.
394+
* for [=relative positioning=], the [=inset properties=] represent
395+
insets from the box’s original margin edge.
396+
* for [=sticky positioning=], the [=inset properties=] represent
397+
insets from the [=scrollport=] edge.
398+
399+
<h3 id="insets">
400+
Box Insets: the 'top', 'right', 'bottom', 'left', 'inset-block-start', 'inset-inline-start', 'inset-block-end', and 'inset-inline-end' properties </h3>
401+
402+
<pre class="propdef">
403+
Name: top, right, bottom, left, inset-block-start, inset-inline-start, inset-block-end, inset-inline-end
404+
Value: auto | <<length-percentage>>
405+
Initial: auto
406+
Applies to: positioned elements
407+
Inherited: no
408+
Percentages: refer to size of <a>containing block</a>; see prose
409+
Computed value: the keyword ''top/auto'' or a computed <<length-percentage>> value
410+
Animation type: by computed value type
411+
</pre>
412+
413+
These [=inset properties=] represent an inward “inset”
414+
on the corresponding side of the box
415+
(with respect to the box’s own [=writing mode=];
416+
see [[!CSS-WRITING-MODES-3#abstract-box]]).
417+
For example, 'top' represents a downward inset of the top edge.
418+
The [=physical=] and [=flow-relative=] properties
419+
interact as defined in [[!CSS-LOGICAL-1]].
420+
Values have the following meanings:
421+
422+
<dl dfn-for="top,right,bottom,left, inset-block-start,inset-inline-start,inset-block-end,inset-inline-end inset-block,inset-inline,inset" dfn-type="value">
423+
<dt><dfn>&lt;length></dfn>
424+
<dd>
425+
The inset is a fixed distance from the reference edge.
426+
Negative values are allowed.
427+
428+
<dt><dfn>&lt;percentage></dfn>
429+
<dd>
430+
The inset is a percentage
431+
relative to the <a>containing block</a>’s size
432+
in the corresponding axis
433+
(e.g. width for 'left' or 'right', height for 'top' and 'bottom').
434+
For [=sticky positioned=] boxes,
435+
the inset is instead
436+
relative to the relevant [=scrollport=]’s size.
437+
Negative values are allowed.
438+
439+
<dt><dfn>auto</dfn></dt>
440+
<dd>
441+
Represents an unconstrained inset;
442+
the exact meaning depends on the [=positioning scheme=].
443+
</dl>
444+
445+
Note: For [=fixed positioned=] elements,
446+
using large values or negative values
447+
can easily move elements outside the <a>viewport</a>
448+
and make the contents unreachable through scrolling or other means.
449+
450+
<h3 id="inset-shorthands">
451+
Box Insets Shorthands: the 'inset-block', 'inset-inline', and 'inset' properties</h3>
452+
453+
<pre class="propdef">
454+
Name: inset-block, inset-inline
455+
Value: <'top'>{1,2}
456+
Initial: auto
457+
Applies to: positioned elements
458+
Inherited: no
459+
Percentages: see individual properties
460+
Computed value: see individual properties
461+
Animation type: by computed value type
462+
</pre>
463+
464+
The 'inset-block' and 'inset-inline' properties are [=shorthand properties=]
465+
for setting 'inset-block-start' + 'inset-block-end'
466+
or 'inset-inline-start' + 'inset-inline-end',
467+
respectively,
468+
in a single declaration.
469+
The first component value sets the start side,
470+
the second sets the end;
471+
if omitted, the second value defaults to the first.
472+
473+
<pre class="propdef">
474+
Name: inset
475+
Value: <'top'>{1,4}
476+
Initial: auto
477+
Applies to: positioned elements
478+
Inherited: no
479+
Percentages: see individual properties
480+
Computed value: see individual properties
481+
Animation type: by computed value type
482+
</pre>
483+
484+
The 'inset' property is a [=shorthand property=]
485+
that sets all of the [=inset properties=]
486+
in a single declaration,
487+
assigning values to the longhands representing each side
488+
exactly as the 'margin' property does for its longhands.
489+
490+
379491

380492
<h3 id="rel-pos">
381493
Relative positioning</h3>
@@ -745,117 +857,6 @@ Fixed positioning</h3>
745857
<!-- End section: Positioning schemes -->
746858

747859

748-
<!-- End section: Choosing a positioning scheme: 'position' property -->
749-
750-
<h2 id="coords">
751-
Positioning Coordinates</h2>
752-
753-
The precise location of a [=positioned box=] is controlled by
754-
the <dfn>inset properties</dfn>:
755-
the [=physical=] [=inset properties=] 'top', 'right', 'bottom', 'left';
756-
the [=flow-relative=] [=inset properties=] 'inset-block-start', 'inset-inline-start', 'inset-block-end', and 'inset-inline-end';
757-
and their [=shorthands=], 'inset-block', 'inset-inline', and 'inset'.
758-
759-
The interpretation of these specified coordinates varies by [=positioning scheme=]:
760-
761-
* for [=absolute positioning=], the [=inset properties=] represent
762-
insets from the containing block.
763-
* for [=relative positioning=], the [=inset properties=] represent
764-
insets from the box’s original margin edge.
765-
* for [=sticky positioning=], the [=inset properties=] represent
766-
insets from the [=scrollport=] edge.
767-
768-
<h3 id="insets">
769-
Box Insets: the 'top', 'right', 'bottom', 'left', 'inset-block-start', 'inset-inline-start', 'inset-block-end', and 'inset-inline-end' properties </h3>
770-
771-
<pre class="propdef">
772-
Name: top, right, bottom, left, inset-block-start, inset-inline-start, inset-block-end, inset-inline-end
773-
Value: auto | <<length-percentage>>
774-
Initial: auto
775-
Applies to: positioned elements
776-
Inherited: no
777-
Percentages: refer to size of <a>containing block</a>; see prose
778-
Computed value: the keyword ''top/auto'' or a computed <<length-percentage>> value
779-
Animation type: by computed value type
780-
</pre>
781-
782-
These [=inset properties=] represent an inward “inset”
783-
on the corresponding side of the box
784-
(with respect to the box’s own [=writing mode=];
785-
see [[!CSS-WRITING-MODES-3#abstract-box]]).
786-
For example, 'top' represents a downward inset of the top edge.
787-
The [=physical=] and [=flow-relative=] properties
788-
interact as defined in [[!CSS-LOGICAL-1]].
789-
Values have the following meanings:
790-
791-
<dl dfn-for="top,right,bottom,left, inset-block-start,inset-inline-start,inset-block-end,inset-inline-end inset-block,inset-inline,inset" dfn-type="value">
792-
<dt><dfn>&lt;length></dfn>
793-
<dd>
794-
The inset is a fixed distance from the reference edge.
795-
Negative values are allowed.
796-
797-
<dt><dfn>&lt;percentage></dfn>
798-
<dd>
799-
The inset is a percentage
800-
relative to the <a>containing block</a>’s size
801-
in the corresponding axis
802-
(e.g. width for 'left' or 'right', height for 'top' and 'bottom').
803-
For [=sticky positioned=] boxes,
804-
the inset is instead
805-
relative to the relevant [=scrollport=]’s size.
806-
Negative values are allowed.
807-
808-
<dt><dfn>auto</dfn></dt>
809-
<dd>
810-
Represents an unconstrained inset;
811-
the exact meaning depends on the [=positioning scheme=].
812-
</dl>
813-
814-
Note: For [=fixed positioned=] elements,
815-
using large values or negative values
816-
can easily move elements outside the <a>viewport</a>
817-
and make the contents unreachable through scrolling or other means.
818-
819-
<h3 id="inset-shorthands">
820-
Box Insets Shorthands: the 'inset-block', 'inset-inline', and 'inset' properties</h3>
821-
822-
<pre class="propdef">
823-
Name: inset-block, inset-inline
824-
Value: <'top'>{1,2}
825-
Initial: auto
826-
Applies to: positioned elements
827-
Inherited: no
828-
Percentages: see individual properties
829-
Computed value: see individual properties
830-
Animation type: by computed value type
831-
</pre>
832-
833-
The 'inset-block' and 'inset-inline' properties are [=shorthand properties=]
834-
for setting 'inset-block-start' + 'inset-block-end'
835-
or 'inset-inline-start' + 'inset-inline-end',
836-
respectively,
837-
in a single declaration.
838-
The first component value sets the start side,
839-
the second sets the end;
840-
if omitted, the second value defaults to the first.
841-
842-
<pre class="propdef">
843-
Name: inset
844-
Value: <'top'>{1,4}
845-
Initial: auto
846-
Applies to: positioned elements
847-
Inherited: no
848-
Percentages: see individual properties
849-
Computed value: see individual properties
850-
Animation type: by computed value type
851-
</pre>
852-
853-
The 'inset' property is a [=shorthand property=]
854-
that sets all of the [=inset properties=]
855-
in a single declaration,
856-
assigning values to the longhands representing each side
857-
exactly as the 'margin' property does for its longhands.
858-
859860
<h2 id="size-and-position-details">
860861
Sizing and positioning details</h2>
861862

0 commit comments

Comments
 (0)