Positioning Playground — Absolute & Relative Offset

Relative positions an element relative to its normal position in the document flow. It still occupies its original space, and surrounding elements are not affected by the offset. Absolute removes the element from the normal flow entirely and positions it relative to its nearest positioned ancestor (an ancestor with position: relative, absolute, or fixed). It no longer takes up space, so other elements can move into its original spot.

For position: relative, the top property shifts the element down from its original position (positive value = move down). left shifts it to the right. bottom shifts it up, and right shifts it left. If both top and bottom are specified, top wins. If both left and right are specified, left wins (in left-to-right languages).

An absolutely positioned element’s containing block is the nearest ancestor that has a position value other than static (usually relative). If no such ancestor exists, it defaults to the initial containing block (usually the viewport / HTML element). In this playground the parent container is set to position: relative, so the blue box is positioned relative to it when using absolute.

Yes! For position: absolute, setting bottom and right anchors the element relative to the bottom‑right corner of the containing block. This is extremely useful for placing elements like “close” buttons or footer badges. If both top and bottom (or left and right) are specified and the element’s height/width is auto, the element will stretch to fill the space. Otherwise the conflicting property is ignored.

The original space of a relatively positioned element is preserved. Therefore, moving it with top/left does not affect the layout of sibling or parent elements — they still act as if the element were in its original location. This makes relative positioning great for small visual adjustments without breaking layout.

Use relative when you need to nudge an element slightly or to create a positioning context for absolutely positioned children. Use absolute when you want to place an element precisely inside a parent, overlay one element on another (like a modal or tooltip), or take an element completely out of the normal flow. Always remember to set the parent to position: relative when using absolute children.