Beginner LevelCSS & Modern Layouts
What are the five CSS position values and how do they affect element placement?
❓ Interview Prompt: Explain static, relative, absolute, fixed, and sticky positioning with use cases.
The position property determines how an element is placed in the document flow:
1
`static` (default): Element follows normal document flow.
top, left, right, bottom have no effect.2
`relative`: Element stays in normal flow but can be offset from its original position using
top/left. Creates a new positioning context for absolute children.3
`absolute`: Element is removed from normal flow and positioned relative to its nearest
position: relative (or non-static) ancestor. Other elements ignore its space.4
`fixed`: Element is removed from flow and positioned relative to the browser viewport. Stays fixed during scrolling (e.g. sticky headers, floating chat buttons).
5
`sticky`: Hybrid behavior — acts like
relative until the element reaches a scroll threshold (defined by top), then acts like fixed within its parent container.Code Implementation Example
css
/* Sticky navigation bar */
.navbar {
position: sticky;
top: 0;
z-index: 100;
background: #f5edf0;
}
/* Absolutely positioned badge on a card */
.card {
position: relative; /* Creates positioning context */
}
.card .badge {
position: absolute;
top: -8px;
right: -8px;
}💡Sticky navbar and absolute badge positioning.
🎯 Interview Key Takeaway
Use sticky for scroll-aware headers, absolute for overlays/badges relative to a parent, and fixed for viewport-locked elements.
#Position#Layout#Sticky#Beginner
Back to all CSS & Modern Layouts Questions→