Syntax

Position

Setting an element is positioned in a document.

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

Overview

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:12x">
<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 based on different states using selectors and applying conditionally.

<div class="rel:hover rel@sm rel@dark rel@print"></div>
Design Token
Colors

Customizing color variables or starting with the crafted palette.

© Aoyue Design LLC.