P2.4: CSS Positions & Z-Index
CSS positions determine how elements are placed relative to their container or the browser viewport.
1. Position Types
- Static (Default): Normal document flow.
- Relative: Positioned relative to its normal position, allowing offset adjustments.
- Absolute: Placed relative to its closest positioned ancestor (anything other than static).
- Fixed: Locked relative to the browser window. Does not scroll.
- Sticky: Switches between relative and fixed depending on scroll positions.
Lea VerouView Profile 🔗
Real-World Developer Case Study RoleW3C CSS Working Group Member
Salary₹75 Lakhs/yr equivalent
CompanyMIT Media Lab
Core Tech Stack
CSS WG SpecsPosition StandardsSVG DesignJS
“Sticky headers and absolute overlays are key components of interactive design. Always verify absolute items have a relative ancestor so they don't position themselves relative to the viewport body!”
2. Z-Index Layering
z-index controls layering on the 3D axis. It only works on elements with a position other than static.