Fixed and Absolute Position

By the end, you can remove an element from normal flow and anchor it either to the viewport with position: fixed or to a positioned ancestor with position: absolute.

What it is

By default, block elements stack in normal flow. Fixed and absolute positioning take an element out of that flow. A fixed element is normally anchored to the viewport, so it stays in place while the page scrolls. An absolute element is anchored to the nearest ancestor whose position is not static. If no such ancestor exists, it uses the initial containing block, which behaves like the viewport for most simple pages.

Related terms: containing block is the box used as the reference point; offsets such as top, right, bottom, and left move the element from that reference; stacking context controls overlap when z-index is used.

Why it matters

• Creates persistent UI such as floating action buttons, cookie banners, or help buttons.
• Places badges, tooltips, dropdowns, or close buttons inside cards without changing the card's layout.
• Gives precise control over overlap and alignment.
• Works well with transforms for centering or animation.
• Helps separate visual placement from document structure.

Syntax or steps

1. Decide the anchor: viewport for fixed, parent for absolute.
2. For absolute positioning, set the intended parent to position: relative unless it already has a non-static position.
3. Set the child to position: absolute or position: fixed.
4. Add offsets such as top: 0 and right: 0.
5. Use z-index only when overlapping matters.

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 0;
  right: 0;
}

.viewport-anchor {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
}

Example

This example puts a badge in the top-right corner of a card and a help button in the bottom-right corner of the viewport.

<div class="card">
  <span class="badge">New</span>
  <h3>Course</h3>
</div>

<button class="help">?</button>

.card {
  position: relative;
  width: 220px;
  padding: 1rem;
  border: 1px solid #ccc;
}

.badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: #d32f2f;
  color: white;
  padding: 2px 8px;
  border-radius: 999px;
}

.help {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
}

Part by part: .card uses position: relative to become the containing block for .badge. The badge uses position: absolute and negative offsets to sit slightly outside the card's top-right corner. The help button uses position: fixed, so it remains anchored to the viewport while the page scrolls.

Common mistakes

• Forgetting the parent anchor. If an absolute child has no positioned ancestor, it may appear in the wrong place. Fix: add position: relative to the intended parent.
• Using fixed for local overlays. A fixed badge inside a card will not move with the card. Fix: use absolute positioning inside a positioned parent.
• Setting only one offset. top: 0 alone may not horizontally place the element. Fix: also set left, right, or a width.
• Expecting z-index to work on static elements. For absolute and fixed elements, set z-index after positioning. Fix: ensure the element has a non-static position.

When to use it

Fixed and absolute solve different anchoring problems. Sticky is often the closest alternative when an element should scroll normally and then stick.

Use fixed for global interface pieces. Use absolute for local overlays that belong to a parent. Avoid fixed when the element should move with its surrounding content.

Practice

Guided exercise: Create a parent box with position: relative and a child box with position: absolute; bottom: 0; left: 0;. Expected output: the child sits in the bottom-left corner of the parent.

Challenge: Make a fixed toast centered at the top of the viewport. Hint: use position: fixed; top: 1rem; left: 50%; transform: translateX(-50%);.

Quick check

Question: If .child is absolute and .parent has no position, where does the child anchor?

Answer: It anchors to the nearest positioned ancestor. If none exists, it uses the initial containing block, which behaves like the viewport in simple layouts.

Summary

Fixed and absolute positioning remove elements from normal flow and let you place them against a chosen reference box. Fixed normally anchors to the viewport, while absolute anchors to the nearest positioned ancestor. Choose the anchor first, then use offsets and stacking carefully.