Position Demo

This single file demonstrates relative, absolute, fixed, and sticky. Some examples intentionally show how positioning changes when the containing block changes.

dark mode single HTML file simple CSS classes sticky list with JS status

1. Normal flow

By default, elements are position: static. Offsets like top and left do not apply.

static

This box stays in normal document flow.

This is the baseline for comparison.

2. Relative parent + shifted relative child

A relative element stays in flow, but can be visually shifted. It also establishes a containing block for absolute children.

parent: relative

child: relative; top/left applied

child: absolute; bottom/right

The absolute child anchors to this parent because the parent is position: relative.

3. Absolute without positioned parent

If no ancestor is positioned, an absolute element uses the initial containing block instead of the local card.

no positioned ancestor inside

The orange note escapes this card area because it is positioned against the page, not this local demo box.

absolute with no local positioned parent

4. Relative wrapper around a fixed element

A fixed element ignores the relative parent for placement. It still pins itself to the viewport.

wrapper: relative

Even though this wrapper is relative, the blue note is fixed to the screen, not to this box.

inside relative in DOM, but fixed to viewport

This is useful for overlays, floating actions, and persistent UI.

5. Sticky in page flow

This block sticks to the top of its scroll container until its parent section scrolls away.

I am position: sticky with top: 56px.

-extra space-

6. Scrollable list with sticky section headers

Scroll inside this list. Each section header is sticky. When the next section reaches the top, the previous sticky header gets pushed upward.

Active sticky section: A

Absolute elements are taken out of normal flow.

They use the nearest positioned ancestor as their containing block.

Without one, they often anchor to the page or viewport origin.

This makes them useful for badges, overlays, and corner pins.

But it also makes layout bugs easier if ancestors are not explicit.

Relative elements remain in normal flow.

Offset properties move the rendered box visually.

The original layout space is still reserved.

Relative is commonly used just to establish an anchor for absolute children.

It is one of the safest positioning tools for local layout control.

Fixed elements attach to the viewport.

They are removed from normal flow like absolute elements.

They are often used for nav bars, floating buttons, drawers, and global notices.

On mobile, be careful with browser UI bars that can change visible viewport height.

Transforms and special containing contexts can affect behavior in advanced cases.

Sticky behaves like relative until a threshold is crossed.

Then it behaves like a locally constrained fixed element.

It only works within the bounds of its scroll container.

It is ideal for section headers, persistent filters, and table headers.

The push-off effect appears when the next sticky header reaches the same top edge.