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.

Last updated: 2026-09-20

Comparing the five values of position

`position` is the property deciding where an element sits, and it takes five values: `static`, `relative`, `absolute`, `fixed` and `sticky`. This tool lets you switch between them while confirming on the spot how `top`, `right`, `bottom`, `left` and `z-index` behave, then generate the CSS.

**When an element placed with `absolute` flies somewhere unexpected, the cause is almost always the same: it is positioned against the nearest ancestor whose `position` is not `static`.** Where no such ancestor exists, the element falls back on the page as a whole. **Forgetting `position: relative` on the parent** accounts for nearly every instance. **`sticky` has a well-known pitfall of its own: an `overflow: hidden` or `overflow: auto` anywhere among the ancestors stops it sticking.** And because `z-index` is confined within a nested unit called a stacking context, **an element inside a context that sits below another cannot rise above it however large the value.**

How to use it

Switch the value of position Trying all five in turn shows how each one differs in what it positions against.
Move the offsets **Confirm that `top` and its fellows have no effect at all while the value is `static`.**
Change z-index You can see how the stacking order shifts.
Copy the generated CSS Once the placement is what you were after, it can be pasted straight into your code.

Tips for getting more out of it

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.

Where it comes in useful

Sticking a heading to the top of the view

**With `sticky`, the heading stays put as the page scrolls.**

Overlaying a badge or icon on a corner

`relative` on the parent with `absolute` on the child is the basic pattern.

Placing a fixed button

`fixed` is positioned against the viewport, so it does not move as the page scrolls.

Investigating a stacking problem

**When an element hides beneath another, a stacking context is the thing to suspect.**

Position terms

Static: The initial value. **While it holds, neither the offsets such as `top` nor `z-index` has any effect.**
Relative: Shifts the element **from where it would otherwise have been.** It moves, yet the space it came from stays reserved.
Absolute: **Positions against the nearest ancestor whose `position` is not `static`.** Failing that, the page as a whole serves.
Fixed: Positions against the viewport, so the element stays put however far the page scrolls.
Sticky: Sits in its ordinary place until a given offset is reached, then sticks. **An `overflow` on an ancestor stops it working.**
Stacking context: The nested unit within which stacking order is settled. **A `z-index` inside one cannot be compared directly with elements outside it.**

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