Position

Explore how the CSS position property affects element placement. Toggle between static, relative, absolute, fixed, and sticky to see their behavior in real time.

Position Type

Offsets

top

right

bottom

left

Generated CSS

position: relative;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;

Positioned Ancestor (relative)

320px × 320px

Static Sibling 1

Target (relative)

Static Sibling 2

class="relative top-[0px] right-[0px] bottom-[0px] left-[0px]"

irelative Behavior

The element remains in the normal document flow (its original space is preserved and siblings do not collapse).

✨ MAGIC: You can now use top, right, bottom, and left to visually nudge the element away from its original starting point. It also becomes a "Positioned Ancestor", meaning any absolute children inside it will now be trapped within its borders.