content.mdx

import { users } from 'websites/data/users' import clsx from 'clsx'

Overview [sr-only]

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.

{users.map((user, index) =>
• {index < 2 && }
  {user.name}

  {user.time}

  {user.message}

)}

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

{users.map((user, index) => <li className={clsx(index === 1 ? 'sticky top:0 z:1' : '', 'bg:gray-30 bg:gray-28:hover bg:gray-32:active flex gap:12 cursor:pointer')} key={index}>
{index < 2 && }
{user.name}

{user.time}

{user.message}

)}

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

<div class="rel**:hover** rel**@sm** rel**@dark** rel**@print**">…</div>