CSS Position

CSS Position

The position property controls how an element is positioned in the document. It works together with the offset properties: top, right, bottom, and left.

Understanding positioning is essential for layouts, overlays, menus, and UI components.

Position

CSS supports several positioning modes:

• static (default): normal document flow
• relative: moves an element relative to its normal position
• absolute: positions an element relative to the nearest positioned ancestor
• fixed: positions an element relative to the viewport
• sticky: toggles between relative and fixed based on scroll position

Relative Position

position: relative keeps the element in the normal flow, but allows you to offset it using top/left etc.

.badge {
  position: relative;
  top: 6px;
  left: 8px;
}

The space the element would normally take remains reserved.

Fixed / Absolute Position

Fixed elements are positioned relative to the viewport and stay in place when the page scrolls.

.top-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 12px 16px;
  background: #fff;
  border-bottom: 1px solid #eee;
}

Absolute elements are removed from the normal flow and positioned relative to the nearest ancestor that is not static.

.card {
  position: relative;
}

.card .corner {
  position: absolute;
  top: 12px;
  right: 12px;
}

If no positioned ancestor exists, the element is positioned relative to the page.

Sticky Position

position: sticky behaves like relative until a scroll threshold is reached, then it “sticks” like fixed.

.sticky-note {
  position: sticky;
  top: 12px;
  padding: 10px 12px;
  background: #eef3ff;
  border: 1px solid #d6e4ff;
  border-radius: 10px;
}

Sticky positioning requires a top (or other offset) value to work.

Code Challenge

Goal: Create a card with a badge in the corner and a sticky helper box.

HTML:

<div class="layout">
  <div class="sticky-help">Tip: Use position carefully.</div>

  <div class="card">
    <span class="badge">NEW</span>
    <h3>Positioning</h3>
    <p>This card uses absolute positioning for the badge.</p>
  </div>
</div>

Task:

• Make the badge appear in the top-right corner of the card
• Use position: relative on the card and position: absolute on the badge
• Make the helper box sticky with top: 12px

Try a Solution:

.layout {
  display: grid;
  gap: 16px;
  max-width: 640px;
}

.sticky-help {
  position: sticky;
  top: 12px;
  padding: 10px 12px;
  background: #eef3ff;
  border: 1px solid #d6e4ff;
  border-radius: 10px;
}

.card {
  position: relative;
  padding: 16px;
  border: 1px solid #ddd;
  border-radius: 12px;
}

.badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #d6e4ff;
  background: #f3f6ff;
  font-size: 12px;
}

What’s Next?

Next, you will learn how top/right/bottom/left offsets work in more detail.