Position

Summary

The `position` property (`static`, `relative`, `absolute`, `fixed`, `sticky`) controls how an element is placed relative to its normal flow or an ancestor. Positioning becomes easier when you understand containing blocks, normal document flow, stacking contexts, and how fixed or sticky elements interact with scrolling containers.

• 1Build a sticky header and a modal using `sticky` and `fixed`. Keep the first version small, then add one improvement after the core behavior works.
• 2Learn how `position: absolute` behaves relative to its nearest positioned ancestor. Focus on understanding the underlying reason it works, not only memorizing the definition.
• 3Practice layering elements with `z-index` and stacking contexts.