Skip to content

Commit 5681f20

Browse files
fantasaifantasai
committed
[css-position-3] Rewrite section defining 'position' property.
1 parent 6505975 commit 5681f20

1 file changed

Lines changed: 132 additions & 117 deletions

File tree

‎css-position-3/Overview.bs‎

Lines changed: 132 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -184,8 +184,91 @@ Value Definitions</h3>
184184
<!-- End section: Values -->
185185
<!-- End section Introduction -->
186186

187-
<h2 id="def-cb">
188-
Containing Blocks of Positioned Boxes</h2>
187+
<h3 id="position-property">
188+
Choosing A Positioning Scheme: 'position' property</h3>
189+
190+
<pre class="propdef">
191+
Name: position
192+
Value: static | relative | absolute | sticky | fixed
193+
Initial: static
194+
Applies to: all elements except table-column-group and table-column
195+
Inherited: no
196+
Animatable: no
197+
Percentages: N/A
198+
Computed value: specified keyword
199+
Animation type: discrete
200+
</pre>
201+
202+
The 'position' property determines which of the positioning schemes
203+
is used to calculate the position of a box.
204+
Values other than ''static'' make the box a <dfn export lt="positioned box|positioned">positioned box</dfn>,
205+
and cause the box to establish an [=absolute positioning containing block=] for its descendants.
206+
Values have the following meanings:
207+
208+
<dl dfn-for="position" dfn-type="value">
209+
<dt><dfn>static</dfn>
210+
<dd>
211+
The box is not a [=positioned box=],
212+
and is laid out according to the rules of its parent [=formatting context=].
213+
The [=inset properties=] do not apply.
214+
215+
<dt><dfn>relative</dfn>
216+
<dd>
217+
The box is laid out as for ''static'',
218+
then offset from the resulting position.
219+
This offsetting is a purely visual effect,
220+
and does not affect the size or position of any other box,
221+
except insofar as it increases the [=scrollable overflow area=] of its ancestors.
222+
223+
<dt><dfn>sticky</dfn>
224+
<dd>
225+
Identical to ''relative'',
226+
except that a offset is automatically adjusted
227+
in reference to the nearest ancestor [=scroll container's=] [=scrollport=]
228+
as modified by the [=inset properties=],
229+
in the axes whose [=inset property=] values are not both ''top/auto''.
230+
231+
<dt><dfn>absolute</dfn>
232+
<dd>
233+
The box is taken out of flow,
234+
meaning it has no impact on the size or position of its siblings and ancestors,
235+
and does not participate in its parent’s [=formatting context=].
236+
237+
Instead, the box is positioned and sized solely in reference to
238+
its [=absolute positioning containing block=],
239+
as modified by the box's [=inset properties=].
240+
It can overlap in-flow siblings
241+
or other [=absolutely positioned=] elements.
242+
243+
<dt><dfn>fixed</dfn>
244+
<dd>
245+
Same as ''absolute'',
246+
except the box is positioned and sized relative to a [=fixed positioning containing block=]
247+
(the [=viewport=] in continuous media, or the [=page area=] in paged media).
248+
The box’s position is fixed with respect to this reference rectangle:
249+
it does not move when the document is scrolled,
250+
and is replicated on every page when it is paginated.
251+
252+
<div class="example">
253+
Authors may wish to specify ''fixed'' in a media-dependent way.
254+
For instance, an author may want a box to remain at the top of the <a>viewport</a> on the screen,
255+
but not at the top of each printed page.
256+
The two specifications may be separated by using an <a href="https://www.w3.org/TR/CSS2/media.html#at-media-rule">'@media'</a> rule, as in:
257+
258+
<pre highlight=css>
259+
@media screen {
260+
h1#first { position: fixed }
261+
}
262+
@media print {
263+
h1#first { position: static }
264+
}
265+
</pre>
266+
</div>
267+
</dl>
268+
269+
270+
<h3 id="def-cb">
271+
Containing Blocks of Positioned Boxes</h3>
189272

190273
The [=containing block=] of a ''position/static'', ''position/relative'', or ''position/sticky'' [=box=]
191274
is as defined by its [=formatting context=].
@@ -314,6 +397,10 @@ Fragmenting Absolutely-positioned Elements</h3>
314397
on each page and that there may be device-specific limits.
315398
</p>
316399

400+
User agents must not paginate the content of fixed boxes.
401+
402+
Note: User agents might print invisible content in other ways.
403+
See [[CSS-PAGE-3#content-outside-box]].
317404

318405
<!-- End section: Containing blocks -->
319406

@@ -397,6 +484,29 @@ Relative positioning</h3>
397484
See the description of <a href="https://www.w3.org/TR/CSS2/visudet.html#line-height">line height calculations</a>
398485
for more information.
399486

487+
<h4 id='relpos-tables'>
488+
Effects of Relative Positioning On Table Elements</h4>
489+
490+
The effect of ''position: relative'' on table elements is defined as follows:
491+
492+
: table-row-group
493+
: table-header-group
494+
: table-footer-group
495+
: table-row
496+
:: offset relative to its normal position within the table.
497+
If table-cells span multiple rows,
498+
only the cells originating in the <a>relative positioned</a> row are offset.
499+
500+
: table-column-group
501+
: table-column
502+
:: do not offset the respective column
503+
and has no visual affect when ''position: relative'' is applied.
504+
505+
: table-caption
506+
: table-cell
507+
:: offset relative to its normal position within the table.
508+
If a table cell spans multiple columns or rows the full spanned cell is offset.
509+
400510
<!-- End section: Relative positioning -->
401511

402512

@@ -523,6 +633,10 @@ Absolute positioning</h3>
523633

524634
References in this specification to an absolutely positioned element (or its box)
525635
imply that the element’s 'position' property has the value ''absolute'' or ''fixed''.
636+
637+
Though absolutely positioned boxes may have margins,
638+
those margins do not <a href="https://www.w3.org/TR/CSS2/box.html#collapsing-margins">collapse</a> with any other margins.
639+
526640
<!-- End section: Absolute positioning -->
527641

528642
<h3 id="fixed-pos">
@@ -542,6 +656,22 @@ Fixed positioning</h3>
542656
Parts of the fixed position box that are not visible in the <a>initial containing block</a>
543657
will not print.
544658

659+
The box’s position is calculated according to the "absolute" model,
660+
but in addition,
661+
the box is fixed with respect to some reference.
662+
As with the "absolute" model,
663+
the box’s margins do not collapse with any other margins.
664+
In the case of handheld, projection, screen, tty, and tv media types,
665+
the box is fixed with respect to the <a>viewport</a> and does not move when scrolled.
666+
667+
In the case of the print media type,
668+
the box is rendered on every page,
669+
and is fixed with respect to the page box,
670+
even if the page is seen through a <a>viewport</a>
671+
(in the case of a print-preview, for example).
672+
673+
For other media types, the presentation is undefined.
674+
545675
<div class="example">
546676
Authors can use fixed positioning to create the following presentation:
547677

@@ -614,121 +744,6 @@ Fixed positioning</h3>
614744
<!-- End section: Fixed positioning -->
615745
<!-- End section: Positioning schemes -->
616746

617-
<h3 id="position-property">
618-
Choosing A Positioning Scheme: 'position' property</h3>
619-
620-
The 'position' property determines which of the positioning algorithms is used to calculate the position of a box.
621-
622-
<pre class="propdef">
623-
Name: position
624-
Value: static | relative | absolute | sticky | fixed
625-
Initial: static
626-
Applies to: all elements except table-column-group and table-column
627-
Inherited: no
628-
Animatable: no
629-
Percentages: N/A
630-
Computed value: specified keyword
631-
Animation type: discrete
632-
</pre>
633-
634-
The values of this property have the following meanings:
635-
636-
<dl dfn-for="position" dfn-type="value">
637-
<dt><dfn>static</dfn></dt>
638-
<dd>
639-
The box is a normal box, laid out according to the <a>normal flow</a>.
640-
The 'top', 'right', 'bottom', and 'left' properties do not apply.
641-
642-
<dt><dfn>relative</dfn></dt>
643-
<dd>
644-
The box’s position is calculated according to the <a>normal flow</a>
645-
(this is called the position in <a>normal flow</a>).
646-
Then the box is offset relative to its normal position and in all cases,
647-
including table elements,
648-
does not affect the position of any following boxes.
649-
When a box B is relatively positioned,
650-
the position of the following box is calculated as though B were not offset.
651-
The effect of ''position: relative'' on table elements is defined as follows:
652-
653-
: table-row-group
654-
: table-header-group
655-
: table-footer-group
656-
: table-row
657-
:: offset relative to its normal position within the table.
658-
If table-cells span multiple rows,
659-
only the cells originating in the <a>relative positioned</a> row are offset.
660-
661-
: table-column-group
662-
: table-column
663-
:: do not offset the respective column
664-
and has no visual affect when ''position: relative'' is applied.
665-
666-
: table-caption
667-
: table-cell
668-
:: offset relative to its normal position within the table.
669-
If a table cell spans multiple columns or rows the full spanned cell is offset.
670-
671-
<dt><dfn>absolute</dfn></dt>
672-
<dd>
673-
The box’s position (and possibly size)
674-
is specified with the 'top', 'right', 'bottom', and 'left' properties.
675-
These properties specify offsets with respect to the box’s <a>containing block</a>.
676-
Absolutely positioned boxes are taken out of the normal flow.
677-
This means they have no impact on the layout of later siblings.
678-
Though absolutely positioned boxes may have margins,
679-
those margins do not <a href="https://www.w3.org/TR/CSS2/box.html#collapsing-margins">collapse</a> with any other margins.
680-
681-
<dt><dfn>sticky</dfn></dt>
682-
<dd>
683-
The box’s position is calculated according to the <a>normal flow</a>
684-
(this is called the position in <a>normal flow</a>).
685-
Then the box is offset relative to its flow root and containing block
686-
and in all cases,
687-
including table elements,
688-
does not affect the position of any following boxes.
689-
When a box B is sticky positioned,
690-
the position of the following box is calculated as though B were not offset.
691-
The effect of 'position': ''sticky'' on table elements is the same as for 'position': ''relative''
692-
693-
<dt><dfn>fixed</dfn></dt>
694-
<dd>
695-
The box’s position is calculated according to the "absolute" model,
696-
but in addition,
697-
the box is fixed with respect to some reference.
698-
As with the "absolute" model,
699-
the box’s margins do not collapse with any other margins.
700-
In the case of handheld, projection, screen, tty, and tv media types,
701-
the box is fixed with respect to the <a>viewport</a> and does not move when scrolled.
702-
703-
In the case of the print media type,
704-
the box is rendered on every page,
705-
and is fixed with respect to the page box,
706-
even if the page is seen through a <a>viewport</a>
707-
(in the case of a print-preview, for example).
708-
709-
For other media types, the presentation is undefined.
710-
711-
<div class="example">
712-
Authors may wish to specify ''fixed'' in a media-dependent way.
713-
For instance, an author may want a box to remain at the top of the <a>viewport</a> on the screen,
714-
but not at the top of each printed page.
715-
The two specifications may be separated by using an <a href="https://www.w3.org/TR/CSS2/media.html#at-media-rule">'@media'</a> rule, as in:
716-
717-
<pre highlight=css>
718-
@media screen {
719-
h1#first { position: fixed }
720-
}
721-
@media print {
722-
h1#first { position: static }
723-
}
724-
</pre>
725-
</div>
726-
727-
User agents must not paginate the content of fixed boxes.
728-
729-
Note: User agents might print invisible content in other ways.
730-
See <a href="https://www.w3.org/TR/CSS2/page.html#outside-page-box">"Content outside the page box"</a>.
731-
</dl>
732747

733748
<!-- End section: Choosing a positioning scheme: 'position' property -->
734749

0 commit comments

Comments
 (0)