CSS · Layout and visual systems
Explain the position property and its values.
Short answer
position controls how an element is placed and which containing block its offsets resolve against. Values are static, relative, absolute, fixed and sticky.
The position value determines whether the element stays in normal flow and what top, right, bottom and left mean. It also affects the containing block used by absolutely positioned descendants.
.badge {
position: absolute;
top: 0.5rem;
right: 0.5rem;
}
.toolbar {
position: sticky;
top: 0;
z-index: 10;
}The values
- static is the default; offsets have no effect
- relative keeps the element in flow and shifts it visually from its normal position
- absolute removes the element from flow and positions it against its containing block
- fixed positions against the viewport unless an ancestor establishes a containing block
- sticky behaves relative until a scroll threshold, then sticks within its scroll container
An absolutely positioned element's containing block is the nearest ancestor with a position other than static, or an ancestor with a transform, filter, perspective, contain or will-change that creates one. If none exists, it uses the initial containing block.
Follow-ups you should expect
Interviewers use these to check whether the first answer was understanding or memorisation.
- 1What is the containing block for an absolutely positioned element?
- 2Why does position fixed sometimes behave like absolute?
- 3What conditions are required for position sticky to work?
- 4Does relative positioning remove the element from normal flow?
Say it in the interview
Static is the default, while relative keeps the element in flow and offsets it visually. Absolute removes it from flow and resolves offsets against its containing block, usually the nearest positioned ancestor. Fixed is relative to the viewport unless an ancestor creates a containing block with transform or similar. Sticky is a hybrid that sticks within its scroll container once it crosses an inset threshold.
Use this as a model, not a script. Saying it in your own words is what makes it survive follow-up pressure.
Related questions
Reading is step one
Now say it out loud.
Understanding an answer and delivering it under pressure are different skills. Rehearse this topic in a live CSS mock interview and get scored feedback on depth, clarity and confidence.