Position

Position utilities control how elements participate in document flow and how they are positioned relative to their parent, viewport, or scrolling container.

Use them for overlays, anchored badges, dropdowns, sticky headers, fixed navigation, floating actions, layout layering and interactive UI components.

Quick reference

Relative and absolute

Use is-relative on the parent before placing is-absolute children inside it.

<div className="is-relative">
  <button className="button">
    Inbox
  </button>

  <span className="badge is-primary is-absolute">
    3
  </span>
</div>

This is the most common positioning pattern for badges, floating controls, dropdown triggers, tooltips and card actions.

Static position

Static is the browser default. Use it when an element should stay in the normal document flow.

<div className="is-static">
  Normal document flow
</div>

Relative position

Relative positioning keeps the element in normal flow while creating a local positioning context for absolutely positioned children.

<div className="card is-relative">
  <span className="badge is-primary is-absolute">
    New
  </span>

  <h3 className="mb-2">Product Card</h3>
  <p className="text-muted mb-0">
    The badge is anchored inside the card.
  </p>
</div>

Absolute position

Absolute positioning removes the element from normal flow and places it relative to the nearest positioned ancestor.

<div className="modal is-relative">
  <button className="button is-absolute">
    Close
  </button>

  <div className="modal-content">
    Modal content
  </div>
</div>

Use absolute positioning for badges, tooltips, dropdown menus, floating controls, decorative elements and overlay content.

Sticky position

Sticky elements remain in normal flow until the scroll threshold is reached. FrontAlign sticky utilities automatically apply top: 0.

<header className="is-sticky">
  Documentation Navigation
</header>

Sticky positioning is ideal for navigation bars, documentation sidebars, table headers, section navigation and dashboard toolbars.

Fixed position

Fixed elements are attached to the viewport instead of the page flow.

<button className="button is-primary is-fixed">
  Support
</button>

Use fixed positioning for floating action buttons, chat launchers, global notifications, mobile navigation and support widgets.

Common patterns

Notification badge

<div className="is-relative">
  <button className="button">
    Inbox
  </button>

  <span className="badge is-danger is-absolute">
    3
  </span>
</div>

Card actions

<article className="card is-relative">
  <button className="button is-absolute">
    Edit
  </button>

  <h3 className="mb-2">Project</h3>
  <p className="text-muted mb-0">Manage project details.</p>
</article>

Modal close button

<div className="modal is-relative">
  <button className="button is-absolute">
    ×
  </button>

  <div className="modal-content">
    Modal content
  </div>
</div>

Sticky documentation sidebar

<aside className="is-sticky">
  Documentation Menu
</aside>

Floating support button

<button className="button is-primary is-fixed">
  Support
</button>

Responsive

Position utilities support responsive variants using FrontAlign’s mobile-first breakpoint system.

<header className="is-static lg:is-sticky">
  Navigation
</header>

In this example, the header behaves normally on mobile and becomes sticky on large screens.

Responsive class reference

Position vs display

Position controls where an element is placed. Display, Flexbox and Grid control how layout is structured.

Usage notes

• Use is-relative before using is-absolute children.
• Use is-sticky for scroll-aware navigation and sidebars.
• Use is-fixed for viewport-level UI such as support buttons or global notices.
• Sticky utilities automatically apply top: 0.
• Responsive variants follow FrontAlign’s mobile-first breakpoint system.
• Position utilities are commonly combined with inset, transform, z-index, flexbox and component utilities.