What are the five values for the CSS position property?
static, relative, absolute, fixed, and sticky.
What is position: static?
The default. The element follows normal document flow. top, right, bottom, left, and z-index have no effect.
What does position: relative do?
The element stays in normal flow but can be offset from its original position using top/right/bottom/left. The space it originally occupied is preserved.
Does position: relative affect other elements?
No — the element is offset visually, but other content is not adjusted to fill the gap left behind.
What does position: absolute do?
The element is removed from normal flow and positioned relative to its nearest positioned ancestor (or the initial containing block if none exists).
What is a ‘positioned’ element?
Any element whose computed position is relative, absolute, fixed, or sticky — anything except static.
What is the containing block for an absolutely positioned element?
The nearest ancestor with a position other than static. If there is none, it’s the initial containing block (the viewport).
What does position: fixed do?
The element is removed from normal flow and positioned relative to the viewport. It stays in place even when the page scrolls.
How does fixed differ from absolute?
Fixed positioning always uses the viewport as its reference, while absolute uses the nearest positioned ancestor.
What does position: sticky do?
The element acts as relatively positioned until it crosses a scroll threshold (e.g. top: 10px), then it becomes fixed within its scrolling container.
What determines when a sticky element ‘sticks’?
The offset values (top, right, bottom, left) define the threshold at which the element transitions from relative to fixed behavior.
What is the z-index property?
It controls the stacking order of positioned elements. Higher values appear in front of lower values. Only works on positioned elements (not static).
Can you use z-index on a statically positioned element?
No — z-index only applies to positioned elements. A positioned element will always stack above a static one by default.
What is a stacking context?
A three-dimensional conceptualization of HTML elements along a z-axis. Created by elements with certain properties like position + z-index, opacity < 1, or transform.
What happens to child elements when a parent has position: relative?
The parent becomes the containing block for any absolutely positioned descendants inside it.
What offset properties are used with positioned elements?
top, right, bottom, and left — they specify the distance from the respective edge of the containing block.
Does a sticky element remain fixed forever?
No — it only stays fixed while its parent container is visible in the viewport. Once the parent scrolls out of view, the sticky element scrolls away with it.
Can fixed elements cause accessibility issues?
Yes — they can overlap content, making it inaccessible. Ensure enough space is available and test at different viewport sizes.
What performance concern exists with sticky/fixed positioning?
The browser must repaint these elements in their new position on every scroll. Using will-change: transform can help by promoting the element to its own compositing layer.
When should you set an element to position: static explicitly?
Only to remove positioning applied by another rule — since static is the default, you rarely need to set it yourself.
