Positioning

What you'll learn

How the position property lets you move elements out of the normal flow, and what each value does.

Why it matters

Badges on a card, a header that stays visible while you scroll, tooltips and pop-ups all rely on positioning.

Explanation

Elements normally flow down the page one after another (position: static). The position property changes that:

• relative: stays in the flow, but can be nudged with top, left, and so on, relative to where it would have been. It also becomes the reference point for absolutely positioned children.
• absolute: removed from the flow and placed relative to the nearest positioned ancestor (one with position other than static). If none exists, the page itself.
• fixed: placed relative to the browser window, and stays there when you scroll.
• sticky: acts like relative until you scroll past a point, then sticks like fixed.

Offsets: top, right, bottom, left. Use z-index to decide which overlapping element is in front.

Example

Step-by-step walkthrough

1. .card is position: relative, which makes it the anchor for its children.
2. .badge is position: absolute with top: -10px; right: -10px, so it pins to the card's top-right corner and sticks out slightly.
3. The scroll box has a fixed height and overflow: auto, so it scrolls.
4. The heading inside is position: sticky; top: 0. Scroll the box and it sticks to the top while the lines move beneath it.

Try it yourself

Move the badge to the bottom-left corner by using bottom and left instead.

Position badge and sticky headingHTML / CSS

Editable code<style> .card { position: relative; width: 220px; padding: 24px; background: #f1f5f9; border-radius: 8px; } .badge { position: absolute; top: -10px; right: -10px; background: tomato; color: white; padding: 4px 10px; border-radius: 999px; font-size: 12px; } </style> <div class="card"> Notebook <span class="badge">New</span> </div>

Run ResetCopyCtrl+Enter to run

Common mistakes

• Using absolute without a relative parent, so the element jumps to the page corner.
• Overusing absolute for layout. Prefer flexbox or grid.
• Forgetting top: 0 on a sticky element, so it never sticks.
• Fighting with z-index when the real problem is a parent that creates a new stacking context.

Quick quiz

Summary

• relative, absolute, fixed, sticky change how an element is placed.
• absolute needs a positioned ancestor; offsets are top, right, bottom, left.
• Use positioning for badges, overlays and sticky headers, not whole-page layout.

Next: reusable values with custom properties.

<style>
  .card {
    position: relative;
    width: 220px;
    padding: 24px;
    background: #f1f5f9;
    border-radius: 8px;
  }
  .badge {
    position: absolute;
    top: -10px;
    right: -10px;
    background: tomato;
    color: white;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
  }
  .scroll {
    height: 90px;
    overflow: auto;
    border: 1px solid #ccc;
    margin-top: 20px;
  }
  .scroll h4 {
    position: sticky;
    top: 0;
    margin: 0;
    padding: 6px;
    background: gold;
  }
</style>

<div class="card">
  Notebook
  <span class="badge">New</span>
</div>

<div class="scroll">
  <h4>Sticky heading</h4>
  <p>Line 1</p><p>Line 2</p><p>Line 3</p><p>Line 4</p><p>Line 5</p><p>Line 6</p>
</div>