Absolute Positioning Inside a Relative Parent
When a child element is set to position: absolute inside a parent with position: relative, the child is positioned relative to the parent, not the viewport or other ancestors. This allows precise placement of the child within the parent's boundaries.
The parent with
position: relativeestablishes a positioning context for the absolutely positioned child.The child is removed from the normal document flow, so it does not affect the layout of sibling elements.
Offsets (
top,right,bottom,left) are calculated relative to the parent's padding box.This combination is commonly used for tooltips, modals, dropdowns, and other overlay elements.
In this example, the .child element is positioned 20px from the top and 30px from the right of its .parent container. Its position is entirely determined by the parent's boundaries, not the viewport.
Use
position: relativeon the parent only if needed for positioning its children; it does not move the parent itself.Combine absolute children with appropriate offsets for precise layout control.
Avoid overusing absolute positioning for large portions of your layout, as it can reduce flexibility and responsiveness.
Consider using Flexbox or Grid for layouts where possible, and reserve absolute positioning for overlays or specific components.