Developer Tools New Tool

Free Online CSS Position Generator with a Scrolling Demo

Set position and the inset properties and watch the result in a container that really scrolls, because relative, absolute, fixed and sticky only look different once something moves. The page also names the ancestor acting as the containing block, which is the part people get wrong.

Free Forever Nothing Uploaded Scrolling demo Runs in your browser

Free Online CSS Position Generator with a Scrolling Demo

Advertisement Slot (Top Banner) Google AdSense Unit • Responsive Banner

CSS Position Generator Everything happens in this tab. Nothing you paste is sent anywhere.

Preview

Scroll this box. The dashed frame below is the parent.

Text inside the parent, above the element.

position: static

A sibling in normal flow. Watch whether it moves.

More text inside the parent, below the element.

Filler so the container has something to scroll.

More filler. Keep going.

And more, so sticky has a distance to travel.

Nearly at the bottom now.

The end of the scrolling area.

CSS

Position Value Write it as inset Use logical properties

Offsets leave a box empty to omit that side

top right bottom left px

Break it on purpose Put a transform on the parent Give the parent overflow: hidden

Containing block right now

Buy Us A Coffee

Enjoying WizTools123? Help keep our server infrastructure 100% free and open for everyone.

Buy Us A Coffee

Sponsored Content (Below Tool) Google AdSense Placement

How to Use CSS Position

A few steps, and nothing is uploaded.

Pick a value Start at static and work down. Each value changes where the offsets are measured from, and the page tells you which ancestor that is.

Scroll the box The demo lives in a container that really scrolls, because relative, absolute, fixed and sticky look identical until something moves.

Break it deliberately Put a transform on the parent and watch a fixed element stop being fixed. Give the parent overflow: hidden and watch sticky stop sticking.

Copy the rule The output is the position and the offsets, as four longhands, as the inset shorthand, or in logical form if you asked for that.

What to Know About CSS Position

Including the two ancestors that break fixed and sticky.

A transform, filter or will-change on an ancestor captures a position: fixed child. Those properties make the element a containing block for fixed and absolute descendants, so a fixed child stops being measured against the viewport and starts being measured against that ancestor. The visible result is a fixed element that suddenly scrolls with the page, and it usually appears when someone adds an animation, a backdrop blur or a will-change hint to a wrapper weeks after the fixed element was written. perspective, contain: paint and backdrop-filter do the same thing.

An ancestor with overflow: hidden kills position: sticky. Sticky works inside the nearest scrolling ancestor, and it can only travel as far as its own parent's box allows. If any ancestor between the element and the scroll container has overflow: hidden, auto or scroll, that element becomes the scroll container, and since it usually has no scrollable height there is no distance for the sticky element to move through, so it never appears to stick. The usual fix is removing an overflow: hidden that was added to clear floats or clip a rounded corner years ago.

position: sticky also needs a threshold and room to move. Sticky with no top, bottom, left or right does nothing at all, because there is no edge for it to stick against. It also needs its parent to be taller than the element, since it will never leave its parent's box; a sticky header in a parent that is exactly as tall as the header will sit still and look broken. Unlike fixed, it keeps its space in normal flow, so nothing else shifts when it sticks.

This page cannot inspect your own page. The containing block shown here is worked out from the controls on this page, not from your markup, so it tells you the rule rather than which of your wrappers is at fault. There is also no way to paste an existing rule in and have the controls follow it. To find the real culprit, walk up the ancestors in devtools looking for a transform, a filter or an overflow.

Key Features & Capabilities

What this tool does, and what it deliberately does not.

All five values Static, relative, absolute, fixed and sticky, side by side.

A box that scrolls The only way the four non-static values can be told apart.

Containing block named The page says what the offsets are being measured against.

Break it on purpose Two switches reproduce the classic fixed and sticky failures.

inset and logical forms Four longhands, the inset shorthand, or the logical properties.

Runs in your browser Nothing is sent anywhere. The page works with the network off.

About the CSS Position Generator

position is five keywords that look simple and are not, because the keyword is only half of the story. The other half is the containing block: the ancestor whose box the offsets are measured against. Get that wrong and the element lands somewhere unexpected, or a fixed header scrolls away, or a sticky nav never sticks, and nothing in the CSS on the element itself explains why.

So this page does two things at once. The demo sits inside a container that genuinely scrolls, because relative, absolute, fixed and sticky are indistinguishable in a still page, and the element has a sibling in normal flow so you can see which values take it out of flow and which do not. Alongside that, the page states in words which ancestor is currently acting as the containing block, and why.

The two switches labelled break it on purpose are the point of the whole tool. A transform on the parent and an overflow: hidden on the parent are responsible for a large share of real position bugs, and both are usually added by someone who was not thinking about positioning at all. Being able to turn each one on and watch the element change behaviour makes the rule stick better than reading it.

Frequently Asked Questions

Containing blocks, sticky, inset and logical properties.

An ancestor has a transform, filter, backdrop-filter, perspective, will-change on one of those, or contain: paint. Any of them makes that ancestor the containing block for fixed descendants, so the element is now fixed relative to the wrapper rather than to the viewport. Walk up the tree in devtools and look for one of those properties, or move the fixed element out of that subtree.

There are three usual causes. It has no threshold, so no top or bottom was set. An ancestor has overflow: hidden, auto or scroll and has become the scroll container without having anything to scroll. Or its parent is not tall enough for it to travel, since a sticky element never leaves its parent's box.

None, other than brevity. inset is a shorthand for top, right, bottom and left, and takes one to four values in the same clockwise order as margin. The one thing to remember is that a shorthand resets the sides you did not mention, so inset: 0 auto sets left and right to auto rather than leaving whatever was there before.

Only if the layout has to work in more than one writing mode. The logical properties map to physical sides based on the writing direction, so inset-inline-start is left in English and right in Arabic. For a site that will only ever be left to right, top and left are clearer to most readers. For anything that will be translated into a right to left language, the logical forms save a stylesheet of overrides.

Yes, more than people expect, even with no offsets. It makes the element a containing block for absolutely positioned descendants, which is the usual reason it is added. It also makes it paintable above static siblings and lets it take a z-index. It does not take the element out of flow, so its space is kept and offsets move it visually without moving anything else.