Position

Position utilities set the CSS position property on an element, controlling how it's placed in the document flow. Positioned elements can then use offset properties (top, right, bottom, left) and z-index utilities for layering.

Position classes

Class CSS value Behavior
.nys-position-static position: static Default. Element flows normally in the document.
.nys-position-relative position: relative Flows normally but can be offset from its natural position. Creates a positioning context for children.
.nys-position-absolute position: absolute Removed from flow. Positioned relative to nearest positioned ancestor.
.nys-position-fixed position: fixed Removed from flow. Positioned relative to the viewport. Stays in place during scrolling.
.nys-position-sticky position: sticky Flows normally until it reaches a scroll threshold, then "sticks" in place.

Relative and absolute

Use .nys-position-relative on a parent and .nys-position-absolute on a child to position elements relative to their container — for example, placing a badge on a card.

Absolute child

Card content positioned normally in the flow.

Copy Code
<div class="nys-position-relative">
  <span class="nys-position-absolute" style="top: 8px; right: 8px;">
    Badge
  </span>
  <p>Card content positioned normally in the flow.</p>
</div>

Sticky

Use .nys-position-sticky with a top offset to make an element stick in place when the user scrolls past it. This is commonly used for section headers or navigation within a long page.

.nys-position-sticky — scroll to see this stick

The New York State Department of Health oversees public health programs across the state, including disease prevention, environmental health, and health facility regulation.

The Office of Mental Health operates psychiatric centers and regulates mental health services provided by local governments and private agencies.

The Department of Labor protects workers, assists job seekers, and collects labor market data to support economic development in all 62 counties.

The Office for People With Developmental Disabilities coordinates services for individuals with intellectual and developmental disabilities and their families.

Copy Code
<div class="nys-position-sticky" style="top: 0;">
  Section header that sticks on scroll
</div>

Responsive variants

All position utilities support responsive prefixes. See Responsive Utilities for breakpoint details.

<!-- Static on mobile, sticky on desktop -->
<nav class="nys-position-static nys-desktop:nys-position-sticky" style="top: 0;">
  Section navigation
</nav>

Edit this page on GitHub (Permissions required)

Last updated: May 22, 2026