Understanding CSS `position`
The `position` property is a fundamental CSS tool that dictates how an element is placed on the page. It's crucial for creating both simple and complex layouts, allowing you to control an element's relationship to its normal flow, its parent, or the viewport.
`position: static;`
The default. Elements follow the normal document flow. `top`, `right`, `bottom`, `left`, and `z-index` have no effect.
`position: relative;`
Elements are positioned according to the normal flow, but you can offset them using `top`, `right`, `bottom`, `left`. The original space is preserved, and it becomes a positioning context for absolute children.
`position: absolute;`
Elements are removed from the normal flow and positioned relative to their nearest *positioned* ancestor (an element with `position` other than `static`). If none, it's relative to the initial containing block.
`position: fixed;`
Elements are removed from the normal flow and positioned relative to the *viewport*. They stay in the same place even when the page is scrolled.
`position: sticky;`
Elements behave like `relative` until they reach a scroll threshold, then they "stick" as if `fixed` within their container or viewport. Requires an offset value (e.g., `top: 0`).