Author
Modern layouts need tooltips, popovers, and sticky elements to stay aligned with targets. Using the Anchor Position API with dynamic viewport units keeps them visually consistent across devices, minimizing layout shifts and enhancing UX.
The Anchor Position API (experimental, Chrome 125+, partial support elsewhere in 2025) allows elements to position themselves relative to a designated “anchor” element. This makes creating tooltips, popovers, sticky menus, and dynamically aligned elements straightforward, even during scrolling.
By linking elements directly to anchors, developers can reduce manual calculations and ensure smooth, consistent alignment.
| Property | Description |
|---|---|
anchor-name |
Assigns a unique identifier to an anchor element. |
position-anchor |
Links an element to a specific anchor. |
inset-* (top, left, right, bottom) |
Positions an element relative to the anchor’s edges or center. |
anchor-name.position-anchor.anchor(top), anchor(bottom), or anchor(center) to place the element dynamically.The API supports top, bottom, left, and right placement, automatically adjusting during scroll events. This ensures elements stay aligned with anchors without extra JavaScript.
<span anchor-name="tooltip-anchor">Hover me</span>
<div class="tooltip">Tooltip content</div>
/* Anchor element */
[anchor-name="tooltip-anchor"] {
cursor: pointer;
}
/* Tooltip styling */
.tooltip {
position: absolute;
position-anchor: tooltip-anchor;
top: anchor(bottom); /* Place below the anchor */
left: anchor(center); /* Center horizontally */
transform: translateX(-50%);
background: oklch(20% 0.1 200); /* Dark for contrast */
color: white;
padding: 5px 10px;
border-radius: 4px;
display: none; /* Hidden by default */
white-space: nowrap;
font-size: 0.9rem;
box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
/* Show tooltip on hover */
[anchor-name]:hover + .tooltip {
display: block;
}
Traditional vh (viewport height) units often cause layout issues on mobile because dynamic toolbars (address bar, navigation bars) change the visible viewport height. The new viewport units solve this by providing more precise, adaptive measurements for modern responsive design.
| Unit | Description |
|---|---|
| lvh | Large viewport height — maximum viewport height (toolbars fully expanded). |
| svh | Small viewport height — minimum viewport height (toolbars collapsed). |
| dvh | Dynamic viewport height — adjusts dynamically as toolbars expand/collapse. |
Browser Support (2025):
Chrome 108+, Firefox 101+, Safari 15.4+, Edge latest.
vhvh: Static, may cause layout jumps on mobile (CLS).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Viewport Units</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<section class="hero">
<h1>Welcome</h1>
</section>
</body>
</html>
.hero {
height: 100dvh; /* Adapts to dynamic viewport height */
display: flex;
align-items: center;
justify-content: center;
background: oklch(80% 0.1 200); /* Accessible background color */
}
@supports not (height: 100dvh) {
.hero {
height: 100vh; /* Fallback for older browsers */
}
}
.hero h1 {
font-size: 2rem;
color: oklch(20% 0.05 200);
}