How to position elements

Start with normal flow

Static positioning is the default. Prefer normal flow, flexbox, or grid for page layout before reaching for offsets.

Create a positioning context

An absolutely positioned child uses the nearest positioned ancestor as its containing block.

.card { position: relative; }
.card__badge {
  position: absolute;
  inset-block-start: 0.5rem;
  inset-inline-end: 0.5rem;
}

Fix or stick an element

Fixed boxes stay relative to the viewport. Sticky boxes act normally until a threshold is crossed within their scrolling container.

.page-nav {
  position: sticky;
  top: 0;
  z-index: 10;
}

Avoid positioning traps

• Absolute elements leave normal flow and can overlap content
• A sticky element needs an inset such as top
• Use z-index sparingly within understood stacking contexts
• Check zoom, narrow screens, and long translated text