CSS Positioning: Taking Elements Out of Normal Flow
CSS position lets you override the default document flow. Think of it as telling an element to ignore its neighbors and listen to top/left coordinates instead. Use it for overlays, modals, and sticky headers.
Why it exists
Web pages default to a "normal flow," where elements stack vertically or sit side-by-side. To build complex UIs like modals, pop-up menus, or headers that stay fixed on screen, developers need a way to break elements out of this flow and place them in specific locations, either relative to the viewport or another element.
The mental model
Think of CSS position as setting an element's "frame of reference." The default, static, means the element respects the normal document flow. Any other value makes the element "positioned," allowing it to be moved with top, left, bottom, and right. The key is understanding what it's being positioned relative to.
How it works
The position property has five key values. static is the default; the element stays in the normal document flow and top/left have no effect. relative positions the element relative to its own original spot, but the space it would have occupied is preserved. absolute removes the element from the flow entirely and positions it relative to its nearest positioned ancestor. fixed removes the element from the flow and positions it relative to the browser viewport, so it doesn't move on scroll. sticky is a hybrid, acting like relative until it hits a scroll offset, then behaving like fixed.
When to use it
Use relative for small adjustments without disturbing the layout. Use absolute for tooltips, dropdown menus, or icons placed on top of other elements. Use fixed for persistent UI like navigation bars or chat widgets. Use sticky for section headers that should stay visible as you scroll past them.
When not to use it
Avoid using position for general page layout. Modern tools like Flexbox and CSS Grid are far more powerful and predictable for creating responsive page structures. Overusing absolute and fixed positioning can lead to maintenance headaches and accessibility issues, as elements are removed from the natural document order.
One canonical example
The parent of an element with position: absolute is often given position: relative without any top/left offsets. This is done simply to establish a positioning context for its children. This simple declaration prevents the absolutely positioned child from being positioned relative to the body or another distant ancestor, keeping it contained where you expect it.
Interview question
When using position: absolute on a child element, why might its direct parent be set to position: relative?
- a.To establish a specific positioning context for the child, preventing it from positioning relative to the viewport or document body.Correct
- b.To ensure the parent element itself is removed from the normal document flow.
- c.To make the parent element's dimensions automatically adjust to contain the absolutely positioned child.
- d.To allow the child to adjust its position based on its own original spot within the parent.
Why? this is the answer
Setting a parent to position: relative creates a positioning context, ensuring that its position: absolute children will position themselves relative to that parent. This prevents the absolutely positioned child from positioning relative to the <body> or another distant ancestor. Position: relative on the parent does not remove it from the normal document flow.
Just read this? Test yourself on what you have been reading.
Read the original → developer.mozilla.org
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on css — each one lists the topics its interview covers.
See open roles