Layout

Position

Style syntax for setting an element is positioned in a document.

🚧This page is still under construction and some content may not be complete.

Overview [sr-only]

ClassDeclarations
position:typeposition: type
relposition: relative
absposition: absolute
staticposition: static
fixedposition: fixed
stickyposition: sticky

Positioning elements as static

Use staticto position an element according to the normal flow of the document. All HTML elements are positioned static by default.

static parent
abs child
<div class="static p:20">
<div>static parent</div>
<div class="abs left:10 bottom:10">abs child</div>
</div>

Positioning elements as relative

Use relto position an element according to the normal flow of the document, and then offset relative to itself based on the values of top, right, bottom, and left.

relative parent
<div class="rel p:20 top:30 left:20">
<div>relative parent</div>
</div>

Positioning elements as absolute

Use absto remove an element from the normal flow of the document, and the element positioned relative to its closest positioned ancestor.

relative parent
abs child
<div class="rel p:50">
<div>relative parent</div>
<div class="abs left:0 top:0">abs child</div>
</div>

Positioning elements as fixed

Use fixedto remove an element from the normal flow of the document. The element positioned relative to the viewport, and it is always stays in the same place.

  • avatar
    aron
    3:03 a.m

    Front-end needs a revolution

  • avatar
    joy
    7:38 p.m

    Shilin night market later 🥰 ?

  • avatar
    miles
    5 mins ago

    task done 🙌🏻

  • avatar
    benseage
    3 hours ago

    Easy game easy life

  • avatar
    lola
    11 seconds ago

    Let me write the doc !

<div>
<input type="search" class="fixed">
<ul>
<li>
<div class="rel">
<img src="">
</div>
<div>
<div class="flex">
<div>Aron</div>
<div>3:03 a.m</div>
</div>
<p>Front-end needs a revolution</p>
</div>
</li>
</ul>
</div>

Positioning elements as sticky

Use stickyto position an element base on scroll position. It's like place the element to a relative position until a given offset position is met and then changing the element to a fixed position.

  • avatar
    aron
    3:03 a.m

    Front-end needs a revolution

  • avatar
    joy
    7:38 p.m

    Shilin night market later 🥰 ?

  • avatar
    miles
    5 mins ago

    task done 🙌🏻

  • avatar
    benseage
    3 hours ago

    Easy game easy life

  • avatar
    lola
    11 seconds ago

    Let me write the doc !

<ul class="overflow:auto">
<li class="sticky top:0">
<img src="">
<div>Joy</div>
</li>
</ul>

Conditionally apply

Apply styles in different states using selectors, media queries, etc.

<div class="rel:hover rel@sm rel@dark rel@print"></div>
PREVIOUS
Overflow

Style syntax for controlling the desired behavior for an element's overflow.

NEXT
Z Index

Style syntax for set the z-order of a positioned element.

MIT License © Aoyue Design LLC.