Position & z-index in CSS
From the CSS cheat sheet · Positioning · verified Jul 2026
Position & z-index
Static, relative, absolute, fixed, and sticky positioning
css
/* Relative (offset from normal position) */
.badge { position: relative; top: -5px; left: 10px; }
/* Absolute (relative to nearest positioned ancestor) */
.tooltip { position: absolute; top: 100%; left: 0; }
/* Fixed (relative to viewport) */
.navbar { position: fixed; top: 0; width: 100%; z-index: 50; }
/* Sticky (scrolls then sticks) */
.sidebar { position: sticky; top: 20px; }💡 Absolute positioning needs a positioned ancestor (relative parent) — otherwise it uses the viewport
⚡ position: sticky is perfect for sidebars, table headers, and section headings
📌 z-index only works on positioned elements — static elements ignore it
🟢 inset: 0 is shorthand for top: 0; right: 0; bottom: 0; left: 0
positionz-indexstickyabsolute