Frontend interview practice question

What is the difference between position: relative, absolute, and fixed?

HighIntermediateCss
By FrontendAtlas Editorial · Updated Jan 30, 2026

Interview quick answer

Position: relative keeps the element in normal flow but allows offsetting it; absolute removes it from flow and positions it relative to the nearest positioned ancestor; fixed removes it from flow and usually anchors to the viewport. Use relative for anchoring children, absolute for overlays, and fixed for persistent viewport controls. Positioning affects stacking and layout flow, so test scrolling and overlap edge cases.

Interview focus

This CSS interview question tests whether you can explain position relative vs absolute vs fixed: what is the difference, connect it to production trade-offs, and handle common follow-up questions.

  • position relative vs absolute vs fixed: what is the difference explanation without falling back to memorized definitions
  • Position and Layout reasoning, edge cases, and production failure modes
  • How you would answer the most likely CSS interview follow-up
Practice more CSS interview questions
Interview answer drill

Use this CSS interview question to rehearse a quick answer, common mistake, follow-up, and production pitfall.

Practice more CSS interview questions Follow 7-day crash study plan Open Essential 60

Full interview answer

Overview

CSS positioning allows you to precisely control where elements appear. The key difference among relative, absolute, and fixed lies in their reference points and whether they occupy space in the normal document flow.

Value

Reference Point

Affects Document Flow?

Typical Use

relative

Itself (original position)

✅ Yes

Small offsets without removing from layout.

absolute

Nearest positioned ancestor (or the document if none)

❌ No

Tooltips, popovers, or overlays positioned freely.

fixed

Viewport (browser window)

❌ No

Viewport-anchored controls, floating buttons, or persistent navigation.

Comparison of positioning types

Example: Demonstrating Different Positions

CSS
.relative-box {
  position: relative;
  top: 10px; left: 20px;
}

.absolute-box {
  position: absolute;
  top: 10px; left: 20px;
}

.fixed-box {
  position: fixed;
  top: 0; right: 0;
  background: #0ea5e9;
  color: white;
  padding: 10px;
}
  • Relative: Moves the element relative to its normal spot, but the space it occupies remains reserved.
  • Absolute: Removes the element from the normal flow and positions it based on the nearest ancestor with position set.
  • Fixed: Anchors the element to the viewport, unaffected by scrolling.

Positioning Hierarchy

  • An absolutely positioned element uses the nearest ancestor that establishes its absolute-positioning containing block; a positioned ancestor commonly provides that anchor.
  • A fixed element normally uses the initial containing block. Properties such as transform, filter, or perspective on an ancestor can establish a different fixed-positioning containing block, so inspect the ancestor chain before assuming the viewport is the reference.

Use Cases

  • relative: fine-tune an element’s position for minor alignment.
  • absolute: create dropdown menus or tooltips detached from normal layout flow.
  • fixed: keep navigation bars or chat buttons visible during scrolling.

Debug sticky separately

position: sticky remains in normal flow and is constrained by a scrollport and containing block, so it is not just another name for fixed positioning. If a sticky header or sidebar scrolls away, use the CSS sticky debugging lab to inspect its inset, real scroll container, available travel, flex or grid alignment, and paint order.

Practical scenario
Pin a badge to a card corner and a header to the top on scroll.

Common pitfalls

  • Absolute elements escaping because the parent isn’t positioned.
  • Fixed elements causing overlay or z-index conflicts.
  • Ignoring mobile viewport and safe areas.
Trade-off or test tip
Absolute positioning is simple but brittle. Test on scroll, resize, and mobile viewports.

Still so complicated?

Imagine three notes: one pinned in place (fixed), one floating near its section header (absolute), and one slightly nudged but still within its group (relative).

Summary

  • relative moves an element without removing it from flow.
  • absolute removes the element and positions it freely.
  • fixed locks the element relative to the viewport for persistent visibility.
  • Choosing the right positioning is essential for precise UI layouts and responsive design.

Why is CSS position: sticky not working?IntermediateHow does z-index work in CSS?IntermediateWhat are media queries and why are they used?Intermediate
Guides
Preparing for interviews?

Use this as one explanation rep, then continue with the CSS interview questions cluster or a guided prep path.

Open frontend interview questionsPractice more CSS interview questionsOpen HTML/CSS interview questionsOpen Essential 60Open Machine Coding HubOpen Question LibraryOpen system design questionsOpen interview preparation guideOpen system design blueprintOpen framework prep pathsOpen Study PlansOpen 7-day crash study planBrowse company questions