Utilities

µCSS provides generic CSS utility classes that can be applied to any element. These include positioning helpers and color utilities.

Positioning

Three classes for sticky and fixed positioning, defined in css/mu.utilities.css:

Class	Effect
`.sticky-top`	`position: sticky; top: 0` — stays in flow, sticks to the top on scroll
`.fixed-top`	`position: fixed; top: 0; right: 0; left: 0` — always fixed to the viewport top
`.fixed-bottom`	`position: fixed; bottom: 0; right: 0; left: 0` — fixed to the viewport bottom

Sticky navigation bar

The recommended approach for navbars — the element stays in the document flow and sticks to the top when scrolled past:

<nav class="sticky-top">
    <ul><li><strong>Brand</strong></li></ul>
    <input type="checkbox" id="nav-s" class="navbar-toggle" hidden>
    <label for="nav-s" class="navbar-burger">&#9776;</label>
    <ul class="navbar-menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
    </ul>
</nav>

Sticky table header

Keep table headers visible while scrolling through long tables:

Name	Email
Alice	alice@example.com
Bob	bob@example.com
Charlie	charlie@example.com
Diana	diana@example.com
Eve	eve@example.com

<table>
    <thead class="sticky-top">
        <tr><th>Name</th><th>Email</th></tr>
    </thead>
    <tbody>...</tbody>
</table>

Sticky sidebar / table of contents

Keep a sidebar or table of contents visible while scrolling through content:

<aside class="sticky-top" style="top: 1rem;">
    <nav>
        <ul>
            <li><a href="#section-1">Section 1</a></li>
            <li><a href="#section-2">Section 2</a></li>
        </ul>
    </nav>
</aside>

Fixed bottom action bar

A common mobile pattern for persistent action buttons at the bottom of the viewport:

<div class="fixed-bottom" style="padding: 1rem; background: var(--mu-background-color);">
    <button class="btn btn-primary" style="width: 100%;">Confirm</button>
</div>

Nav-specific overrides

When used on a <nav>, the positioning classes automatically add z-index: 100 and box-shadow to elevate the navbar above content. See Nav for details.

Notes

.sticky-top requires a scrollable ancestor — the element stays in the document flow and sticks when scrolled past.
.fixed-top and .fixed-bottom remove the element from the flow — add padding-top or padding-bottom on <body> to prevent content from being hidden behind.
Override the default top: 0 on .sticky-top via inline style if you need an offset (e.g., style="top: 1rem").

Color utilities

Text, background, and border color classes are documented in Colors.

Accessibility

Sticky and fixed elements can obscure content for keyboard and screen reader users — ensure sufficient padding or offsets to prevent overlap.
Fixed bottom bars should not block interactive elements underneath; test with keyboard tab navigation.
Use appropriate ARIA landmarks (role="navigation", role="complementary") on sticky elements so assistive technologies can identify them.
Ensure sticky headers remain visible and do not create scroll traps on small viewports.