HTML & CSS in 7 days

CSS positioning is like the GPS of web design: it helps place elements exactly where you want them on a webpage. There are five main position properties:

1. Static: This is the default. Elements are positioned according to the normal document flow. They aren't affected by the top, bottom, left, or right properties.

2. Relative: The element is positioned relative to its normal position. You can move it with the top, bottom, left, and right properties without affecting the layout of other elements.

3. Absolute: The element is removed from the normal document flow and is positioned relative to its closest positioned ancestor (if any); otherwise, it’s relative to the initial containing block (the viewport). Other elements are positioned as though the absolutely positioned element does not exist.

4. Fixed: Similar to absolute, but the element is positioned relative to the viewport. It stays in place even when the page is scrolled.

5. Sticky: The element toggles between relative and fixed positioning, depending on the user's scroll position. It's positioned relative until a given offset position is met in the viewport, then it sticks in place (like a fixed element).