Position Offsets

You will use top, right, bottom, and left to place an element that has a positioning context, such as fixed, absolute, relative, or sticky.

What it is

Position offsets are CSS properties that describe how far an element should be placed from an edge of its positioning context. The mental model is: position chooses the coordinate system, and top, right, bottom, and left choose the location inside that system. For relative, offsets move the element from where it would normally be, while leaving its original space in the layout. For absolute, offsets are measured from the nearest positioned ancestor. For fixed, offsets are measured from the viewport. For sticky, offsets define the point where the element stops scrolling and sticks. Related terms include containing block, stacking context, and the inset shorthand.

Why it matters

• Pin notifications, toasts, or cookie banners to a corner of the screen.
• Place dropdown menus, tooltips, and popovers near a trigger element.
• Create sticky headers or sidebars that remain visible while scrolling.
• Make small visual adjustments with relative without removing an element from normal flow.
• Build overlays and dialogs that need precise placement independent of surrounding content.

Syntax or steps

1. Set a non-static position value, such as fixed, absolute, relative, or sticky.
2. Add one or more offset properties: top, right, bottom, or left.
3. Use auto when you want an offset to remain unset.
4. Use inset as a shorthand when you want to set all four offsets at once.

.example {
  position: fixed;
  top: 10px;
  right: 10px;
}

Example

.toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 280px;
  padding: 12px 16px;
  background: #111827;
  color: #f9fafb;
  border-radius: 8px;
}

This creates a toast notification anchored to the bottom-right corner of the viewport.

• position: fixed; makes the viewport the containing block, so the toast does not move with page scroll.
• bottom: 20px; places the bottom edge of the toast 20 pixels above the viewport bottom.
• right: 20px; places the right edge of the toast 20 pixels from the viewport right edge.
• width, padding, background, color, and border-radius style the box; they are not required for positioning.

Common mistakes

• Using offsets on a static element. If position is static, top and left are ignored. Fix: set position: relative; or another positioned value.
• Using absolute without a positioned ancestor. The element may position against the initial containing block unexpectedly. Fix: add position: relative; to the intended parent.
• Setting both top and bottom with a fixed height. The offsets can conflict. Fix: choose the edge you need, or use height: auto when stretching is intended.
• Forgetting scroll containers with sticky. Sticky offsets only work while the element is inside its scrollable ancestor. Fix: check overflow and parent height.

When to use it

Position offsets are best when you need coordinate-based placement. Margins are better for normal-flow spacing.

Practice

Guided exercise: Make a header stick to the top of the viewport.

1. Add position: sticky; to the header.
2. Add top: 0; so it sticks when its top edge reaches the viewport top.
3. Scroll the page and confirm the header remains visible.

Challenge: Move the toast example to the bottom-left corner.

Hint: Replace right: 20px; with left: 20px;.

Expected output: The toast stays fixed 20 pixels from the bottom and 20 pixels from the left edge.

Quick check

Question: Why does top: 20px; not move a normal div?

Answer: Because a normal div has position: static;, and offsets only apply to positioned elements.

Summary

Position offsets turn top, right, bottom, and left into placement instructions, but only after position establishes a coordinate system. Use them for overlays, sticky elements, and precise nudges, and use margins for ordinary flow spacing.