#CSS Position
In CSS, the position property is used to specify how an element is positioned, determining its behavior in the document flow and what it is positioned relative to.
| Value | Description | Removed from Document Flow |
|---|---|---|
static | Default value. Elements are laid out in the normal document flow. | No |
relative | Offsets the element relative to its normal position; often used as a reference for absolute positioning. | No |
absolute | Positioned relative to the nearest non-static ancestor. | Yes |
fixed | Positioned relative to the viewport (does not move when scrolling). | Yes |
sticky | “Sticks” to a defined position during scroll. | - |
static
absolute
fixed
sticky
Sticky-positioned elements cannot escape their containing block. Once they reach the bottom of the parent container during scroll, they stop "sticking" and scroll with the content.