CSS Positioning

CSS Positioning — Understand the CSS position property and control element placement with static, relative, absolute, fixed, and sticky. The guide walks through The Position Property, Static and Relative Positioning, Absolute Positioning, Fixed and Sticky Positioning, Z-Index and Stacking Context. The position property specifies how an element is positioned in the document. It has five values: .element { position: static; } /* Default: normal flow */ .element { position: relative; } /* Offset from normal position */ .element { position: absolute; } /* Positioned relative to nearest positioned ancestor */ .element { position: fixed; } /* Positioned relative to viewport… Static (default): Elements with position: static follow the normal document flow. The top, right, bottom, and left properties have no effect. This is the default for all elements. Relative: An element with position: relative is offset from its normal position in the flow. The element's original space is preserved - other elements don't shift to fill the gap. .icon {…