Nearby lessons
16 of 19📌 CSS Position Property
📌 What is CSS Position Property?
The position property in CSS specifies how an element is positioned in a document.
It plays a crucial role in controlling layout, layering, and behavior of elements.
- static – Default position (normal document flow)
- relative – Offset from original position
- absolute – Positioned relative to nearest positioned ancestor
- fixed – Fixed to viewport, unaffected by scroll
- sticky – Switches between relative and fixed on scroll
📍 position: static
This is the default position. Elements appear in normal document flow.
Example02
📍 position: relative
Moves element relative to its normal position without affecting siblings.
Example03
📍 position: absolute
Removes element from flow and positions it relative to nearest positioned ancestor.
Example04
📍 position: fixed
Element is fixed to viewport and stays in place during scroll.
Example05
📍 position: sticky
Element toggles between relative and fixed based on scroll position.
Example06
💡 Positioning Best Practices
- ✅ Always define a positioned ancestor when using absolute.
- ✅ Use fixed positioning for sticky buttons or headers.
- ✅ Combine z-index carefully with position to manage layers.
- 🚫 Avoid overusing absolute or fixed – it can break layouts.
- 📱 Test sticky and fixed behavior on mobile devices.
🧠 Test Your Knowledge
5 QuestionsProgress: 0 / 5