The position property in CSS specifies how an element is positioned in the document. It affects how the element is laid out and how it interacts with other elements on the page.

Position Property Values

1
static – The default positioning; elements follow normal document flow.
2
relative – Positions the element relative to its normal position. Can be offset using top, right, bottom, left.
3
absolute – Positions the element relative to the nearest positioned ancestor (not static). Removed from normal document flow.
4
fixed – Positions the element relative to the viewport. It stays in the same place even when the page is scrolled.
5
sticky – Toggles between relative and fixed depending on the scroll position. Useful for headers or table headings that stick while scrolling.

Example: Using Different Position Values

Using position allows precise control over element placement, overlapping elements, and layout behavior. It's essential for creating complex layouts, sticky headers, modals, and floating elements.

Best Practices

1
Use relative sparingly to offset elements without removing them from flow.
2
Combine absolute with positioned parent containers for predictable layouts.
3
Use fixed for persistent UI elements like sticky buttons or navigation bars.
4
Test sticky behavior across browsers; ensure parent container has sufficient height.
5
Avoid overusing absolute positioning for entire layouts as it can reduce flexibility and responsiveness.

Difficulty: 5/10

Topics: layout, positioning, z-index

Scenario Questions

0-2 years experience

1
We have a card component with an image that should overlay the bottom‑right corner of the card. How would you use the position property to achieve that?
2
If you set an element to position: absolute but forget to set a positioned ancestor, where will it be placed on the page?
3
What is the practical difference between position: static and position: relative for layout flow?

2-5 years experience

1
You added a tooltip that uses position: absolute, but it sometimes appears off‑screen when the page is scrolled. Walk me through how you'd debug and fix it.
2
Our modal uses position: fixed to stay centered, but on mobile browsers the address bar hides and the modal shifts. What trade‑offs would you consider and how would you adjust the CSS?
3
We need a header that sticks to the top after scrolling past a banner. Explain how you'd implement it and why you might choose position: sticky over a JavaScript solution.

5-8 years experience

1
Our design system mixes flexbox and absolute positioning for overlay elements. How would you evaluate the performance and maintainability impact of using absolute positioning at scale?
2
During a migration to CSS modules we discovered many components rely on global position: relative containers. How would you refactor the codebase to avoid layout bugs while keeping the migration timeline?
3
Explain how you would ensure that z-index stacking contexts created by positioned elements don't cause unexpected overlay issues across multiple micro‑frontends.

8+ years experience

1
We are consolidating several legacy apps into a unified design system, and positioning strategies differ (relative, absolute, fixed, sticky). How would you define guidelines and tooling to enforce consistent use and prevent cross‑team regressions?
2
When introducing a new CSS‑in‑JS framework, you need to decide how to handle positioning tokens (top, left, etc.) to keep them themeable. What architectural considerations would you weigh, and how would you structure the token system?
3
We plan to support a new native mobile webview that has quirks with position: fixed. How would you design a fallback strategy that scales across web and native platforms without fragmenting the codebase?

Follow-up Questions

❓What happens to child elements when you change the parent's position?
❓How does z-index interact with different positioning values?
❓Can you describe a scenario where using position: sticky would be problematic?