CSS Position
The position property defines how an element is placed in the document flow. It is one of the most important tools for layout and fine-tuning placement.
Position values
CSS position can take several values, each behaving differently in the layout.
| Value | Description |
|---|---|
| static | Default value. The element is placed in the normal document flow. |
| relative | The element moves relative to its normal position, based on top, left, right, bottom values. |
| absolute | The element is positioned relative to the first non-static parent. |
| fixed | The element is fixed relative to the browser window and does not move when scrolling. |
| sticky | The element remains fixed during scrolling for a while, then returns to normal flow. |
Absolute positioning
Absolute positioning allows you to precisely define where an element should appear inside its parent container.
In the above example, the red box is positioned in the top-right corner of the gray parent box.
Sticky position
Sticky position can be useful for navigation bars, as the element stays at the top of the screen while scrolling, then returns to flow.
Tips for using position
Proper use of position is essential for creating precise and responsive layouts.
- Always set position: relative on the parent if you want to absolutely position a child.
- Use fixed positioning carefully, as it can cover content while scrolling.
- Sticky is especially useful for navigation bars and headers.
✨ Ask Lara — your AI study partner
Unlock personalized learning support. Lara can explain lessons, summarize topics, and answer your study questions — available from the Go plan and above.
Lara helps you learn faster — exclusive to ReadyTools Go, Plus, and Max members.
