mozilla

Compare Revisions

position

Change Revisions

Revision 502317:

Revision 502317 by teoli on

Revision 507607:

Revision 507607 by teoli on

Title:
position
position
Slug:
Web/CSS/position
Web/CSS/position
Tags:
"CSS Positioning", "CSS", "Reference", "Référence", "CSS Property", "NeedsLiveSample"
"CSS Positioning", "CSS", "Reference", "Référence", "CSS Property", "NeedsLiveSample"
Content:

Revision 502317
Revision 507607
n20      A <strong>positioned element</strong> is an element whose <n20      A <strong>positioned element</strong> is an element whose <
>a href="/en-US/docs/CSS/computed_value" title="CSS/computed_value>a href="/en-US/docs/CSS/computed_value" title="CSS/computed_value
>">computed</a> position property is <code>relative</code>, <code>>">computed</a> position property is <code>relative</code>, <code>
>absolute</code>, or <code>fixed</code>.>absolute</code>, <code>fixed</code> or <code>sticky</code>.
nn24    </p>
25    <p>
26      An <strong>relatively positioned element</strong> is an ele
 >ment whose <a href="/en-US/docs/CSS/computed_value" title="CSS/co
 >mputed_value">computed</a> position property is <code>relative</c
 >ode>.
27    </p>
28    <p>
29      A <strong>stickily positioned element</strong> is an elemen
 >t whose <a href="/en-US/docs/CSS/computed_value" title="CSS/compu
 >ted_value">computed</a> position property is <code>sticky</code>.
n51        Normal behavior.&nbsp; The <code>top</code>, <code>right<n57        This keyword let the element use the normal behavior, tha
>/code>, <code>bottom</code>, and <code>left</code> properties do >t is it is laid out in its current position in the flow.&nbsp; Th
>not apply.>e <code>top</code>, <code>right</code>, <code>bottom</code>, and 
 ><code>left</code> properties do not apply.
n57        Lay out all elements as though the element were not positn63        This keyword lays out all elements as though the element 
>ioned, and then adjust the element's position, without changing l>were not positioned, and then adjust the element's position, with
>ayout (and thus leaving a gap for the element where it would have>out changing layout (and thus leaving a gap for the element where
> been had it not been positioned). The effect of <code>position:r> it would have been had it not been positioned). The effect of <c
>elative</code> on <code>table-*-group</code>, <code>table-row</co>ode>position:relative</code> on <code>table-*-group</code>, <code
>de>, <code>table-column</code>, <code>table-cell</code>, and <cod>>table-row</code>, <code>table-column</code>, <code>table-cell</c
>e>table-caption</code> elements is undefined.>ode>, and <code>table-caption</code> elements is undefined.
n69        The box's position is calculated according to the normal n75        The box position is calculated according to the normal fl
>flow (this is called the position in normal flow). Then the box i>ow (this is called the position in normal flow). Then the box is 
>s offset relative to its flow root and containing block and in al>offset relative to its flow root and containing block and in all 
>l cases, including <code>table</code> elements, does not affect t>cases, including <code>table</code> elements, does not affect the
>he position of any following boxes. When a box B is stickily posi> position of any following boxes. When a box B is stickily positi
>tioned, the position of the following box is calculated as though>oned, the position of the following box is calculated as though B
> B were not offset. The effect of ‘<code>position: sticky</code>’> were not offset. The effect of ‘<code>position: sticky</code>’ o
> on <code>table</code> elements is the same as for ‘<code>positio>n <code>table</code> elements is the same as for ‘<code>position:
>n: relative</code>’.> relative</code>’.
t85      To position an element relatively 20px from the top and left91      To position an element relatively <code>20px</code> from th
>t of its normal position, the following CSS is used.>e top and left of its normal position, the following CSS is used.

Back to History