HTML and CSS Positioning & Z-Index
HTML & CSS: Positioning & Z-Index
Positioning lets you break out of normal flow when you need overlays, tooltips, sticky headers, or UI chrome.
Learn how the position property, offsets, and z-index interact with stacking contexts.
Positioning modes
- static - default; the element stays in normal flow.
- relative - stays in flow but offsets visually using
top/right/bottom/left. - absolute - removed from flow and positioned relative to the nearest ancestor with positioning.
- fixed - pinned to the viewport; ignores scrolling.
- sticky - behaves like relative until a scroll threshold where it sticks like fixed.
Note: Normal flow means the browser's default placement.
Absolute and fixed positioning skip that flow, so other elements act like they are not there.
If you want to read more about CSS Positioning or get an in-depth understanding, go to CSS Positioning in the CSS tutorial.
Offset properties
Combine position with offsets to place elements:
top/bottomcontrol vertical displacement.left/rightcontrol horizontal displacement.- Percentages resolve against the containing block (e.g., positioned ancestor).
Note: Offsets move the element away from its reference point.
For example, top: 10px pushes it 10 pixels down.
Sticky Header with Scroll Indicator
Sticky headers are common in UI chrome and navigation.
Sticky utility
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" type="text/css">
</head>
<body>
<header class="hero">
<h1>Design Systems Handbook</h1>
<progress value="25" max="100"></progress>
</header>
<main>
<p>Scroll to see the sticky header stay in view while content flows underneath.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque habitant morbi tristique senectus et netus.</p>
</main>
</body>
</html>
body {
margin: 0;
font-family: "Inter", sans-serif;
}
header.hero {
position: sticky;
top: 0;
z-index: 1000;
background: linear-gradient(90deg, #2563eb, #7c3aed);
color: #fff;
padding: 20px 24px;
}
header.hero progress {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 4px;
appearance: none;
}
header.hero progress::-webkit-progress-value {
background: rgba(255,255,255,0.9);
}
main {
padding: 48px 24px 96px;
max-width: 720px;
margin: 0 auto;
line-height: 1.8;
}
Managing z-index
- Only positioned elements (plus flex/grid children) respect
z-index. - Higher
z-indexwins within the same stacking context. - New stacking contexts form when you use
positionwithz-index, or properties likeopacity < 1,transform, orfilter.
Note: Think of z-index as depth.
Bigger numbers appear on top, but only inside the same stacking context.
If you want to read more about CSS z-index or get an in-depth understanding, go to CSS z-index in the CSS tutorial.
Pattern: tooltip component
Hover tooltip
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" type="text/css">
</head>
<body>
<button class="button">
Save draft
<span class="tooltip">Shortcut: Ctrl + S</span>
</button>
</body>
</html>
.button {
position: relative;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 18px;
border-radius: 999px;
background: #1d4ed8;
color: #fff;
cursor: pointer;
}
.button span.tooltip {
position: absolute;
left: 50%;
bottom: calc(100% + 12px);
transform: translateX(-50%);
background: #0f172a;
color: #fff;
padding: 8px 12px;
border-radius: 8px;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease, transform 0.2s ease;
z-index: 10;
}
.button:hover span.tooltip {
opacity: 1;
transform: translate(-50%, -4px);
}
Guidelines
- Prefer relative + absolute positioning within components for badges or icons.
- Keep fixed elements (like sticky navbars) minimal to avoid screen real estate issues.
- Use
position: sticky;for table headers or in-page navs that follow scrolling sections. - Audit stacking contexts when overlays misbehave-DevTools highlights them.
