Visual Playground

`position-area` Playground

Explore how position-area values place an element relative to its anchor using the 3×3 grid model. This console is designed to show both the selected region and the final positioned box so the mental model stays accurate.

You are choosing a region of the implicit grid, not directly placing the element’s box.

The element is then aligned within that region, usually toward the anchor.

Single-keyword values such as top or block-end imply span-all on the other axis.

Want to test your fundamentals? Try the Fundamentals Quiz.

Teaching Controls

Choose a region, then watch how the stage resolves it.

Use these logical region controls to choose a placement, then inspect the console and generated CSS below.

Element preset

Choose the size and behavior of the positioned element

Area picker

Tile regions

Single keyword regions

These imply span-all on the other axis

Span regions

Multi-cell areas for menus and wider layouts

Orbital Console

top selects the top region, which implies span-all on the other axis. On this stage that resolves above the anchor, and the element aligns toward it by default.

Anchor trigger Reference element

Tooltip Aligned toward the anchor.

Live Code

position-area Playground

Choose a region, then watch how the stage resolves it.

`position-area` Playground