Position

Setting an element is positioned in a document.

Overview

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.

<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.

<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.

<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.

<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.

<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>