CSS position Property Generator

Switch between the 5 CSS position values (static, relative, absolute, fixed, sticky) in a GUI, see how top/right/bottom/left and z-index behave in a live preview, and generate the matching CSS code for free.

Tips

Switch to position: relative and set top/left to shift Box B visually away from its original spot — notice Box C (the element after it) doesn't move at all.
Switch to absolute or fixed and Box B is pulled entirely out of the normal flow, so Box C shifts up to fill the gap it left behind.
z-index controls stacking order when elements overlap, but it has no effect on position: static elements — try changing position before testing "Set z-index".
position: sticky only works inside a scrollable container. Scroll the preview box itself to see the element lock into place partway through.
The generated CSS can be copied and pasted straight into your own stylesheet — try it on a real page to confirm it looks the same.

Frequently Asked Questions

absolute is positioned relative to its nearest positioned ancestor (the closest parent that isn't position: static); if none exists, it falls back to the page's initial containing block. fixed, on the other hand, is always positioned relative to the browser viewport, so it stays in the same spot on screen even while the page scrolls.

The most common causes are a parent element with overflow: hidden or overflow: auto, a parent whose height barely exceeds the sticky element's own height (leaving no room to stick), or simply forgetting to set an offset like top. sticky's effect is also confined to its parent container, so that container needs to actually be a scrollable area.

relative shifts an element visually away from the position it would have occupied as a normal, static element, based on the top/right/bottom/left values you set. Crucially, the space it originally occupied in the layout is still reserved — that's the key difference from absolute, which removes the element from the flow entirely.

z-index only affects elements that aren't position: static (so relative, absolute, fixed, or sticky). It also won't behave as expected if a parent element creates its own stacking context — for example by using transform or opacity alongside position — since child z-index values are then scoped to that parent context.

The standard trick is to add position: relative to the parent element you want to use as the reference point. You don't even need to set any offset values on it — simply adding position: relative turns it into a "positioned element", and any absolutely positioned descendant will then be placed relative to its inner edges.

Side Note — The Long Road to Standardizing position: sticky

CSS has had static, relative, absolute, and fixed since its early days, but building a header or sidebar that stays in place only after you scroll past it required watching scroll events with JavaScript and manually toggling position: fixed. There was no way to express that behavior in CSS alone.

The idea behind position: sticky was actually proposed as early as 2012 in the CSS Positioned Layout Module Level 3 spec, but it proved tricky to implement well. Safari shipped an early, vendor-prefixed version (-webkit-sticky) around 2013, Chrome didn't support the standard sticky keyword until 2017, and it wasn't until roughly 2020 that all major browsers, including Firefox, could be relied on to support it consistently.

Under the hood, sticky's "locks in place partway through scrolling" behavior is best described as a hybrid of relative and fixed: the element behaves like relative under normal circumstances, then switches to behaving like fixed once the scroll position reaches the offset you specified. That switch only ever triggers within the scrollable range of the parent element — which is exactly why sticky so often appears to "not work" when a parent's overflow or height gets in the way.

Today, sticky is a staple web design technique — pinning a table's header row in place, keeping a table of contents visible while scrolling, and more. Eliminating the need for JavaScript-based scroll listeners was a genuine win for both performance and code simplicity.

Browse all trivia

CSS position Property Generator

Tips

Frequently Asked Questions

What is the difference between absolute and fixed?

Why isn't position: sticky working?

What exactly is position: relative relative to?

Why doesn't z-index change the stacking order even after I set it?

How do I set the containing block that an absolute element is positioned against?

Side Note — The Long Road to Standardizing position: sticky