Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
Position elements relative to other elements (anchors)
Pure CSS solution - no JavaScript calculations needed
Perfect for tooltips, dropdowns, and popovers
Automatically adapts to anchor element position
Part of CSS Anchoring Module Level 1
Cutting-edge feature with evolving browser support
Chrome 125+: Experimental support (flag required)
Firefox: Under development
Safari: Under consideration
💡 Recommendation: Use as progressive enhancement with JavaScript fallback
Name an element as an anchor point for other elements to reference
anchor-name: --my-anchor;Connect a positioned element to the anchor using its name
position-anchor: --my-anchor;Specify where to position relative to the anchor (top, bottom, left, right)
inset-area: top;Browser automatically updates position when anchor moves or resizes
/* No JavaScript needed! */.button {
/* Define this element as an anchor */
anchor-name: --my-button;
/* Position it normally */
position: relative;
}.tooltip {
/* Link to the anchor */
position-anchor: --my-button;
/* Must use absolute positioning */
position: absolute;
/* Position above the anchor */
inset-area: top;
/* Optional: Add margin */
margin-bottom: 10px;
}/* Anchor element */
.button {
anchor-name: --my-button;
}
/* Positioned element */
.tooltip {
position: absolute;
position-anchor: --my-button;
inset-area: top;
margin-bottom: 10px;
/* Styling */
background: #1e293b;
color: white;
padding: 8px 12px;
border-radius: 6px;
}| Property | Values | Description |
|---|---|---|
anchor-name | --custom-name | Defines an element as an anchor with a custom name |
position-anchor | --custom-name | Links positioned element to a specific anchor |
inset-area | top, bottom, left, right, center, etc. | Specifies position relative to anchor |
anchor() | function | Function to reference anchor positions in calculations |
position-fallback | fallback-name | Defines fallback positions if primary doesn't fit |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Anchor Positioning - Basic</title>
</head>
<body>
<div class="container">
<h1>⚓ CSS Anchor Positioning</h1>
<p class="subtitle">The popup is positioned relative to the button!</p>
<div class="demo-wrapper">
<button class="anchor-button">
I'm the Anchor
</button>
<div class="popup">
📍 Positioned with anchor-name & position-anchor
</div>
</div>
<div class="code-display">
<div><span class="comment">/* Define the anchor */</span></div>
<div>.anchor-button {</div>
<div>
<span class="property">anchor-name</span>: --my-anchor;</div>
<div>}</div>
<br>
<div><span class="comment">/* Position relative to anchor */</span></div>
<div>.popup {</div>
<div>
<span class="property">position-anchor</span>: --my-anchor;</div>
<div>
<span class="property">inset-area</span>: top;</div>
<div>}</div>
</div>
</div>
</body>
</html>Loading preview...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Anchor Positioning - Interactive Tooltip</title>
</head>
<body>
<div class="container">
<h1>⚓ Interactive Tooltips</h1>
<p class="subtitle">Hover over buttons to see anchor-positioned tooltips!</p>
<div class="demo-grid">
<div class="button-wrapper">
<button class="action-button btn-1">Top Tooltip</button>
<div class="tooltip tooltip-1">Positioned above 👆</div>
</div>
<div class="button-wrapper">
<button class="action-button btn-2">Right Tooltip</button>
<div class="tooltip tooltip-2">Positioned right 👉</div>
</div>
<div class="button-wrapper">
<button class="action-button btn-3">Bottom Tooltip</button>
<div class="tooltip tooltip-3">Positioned below 👇</div>
</div>
</div>
<div class="info-banner">
<strong>💡 How it works:</strong> Each button has an <code>anchor-name</code>,
and its tooltip uses <code>position-anchor</code> to link to it. The <code>inset-area</code>
property positions the tooltip (top, right, bottom). Traditional positioning is used as fallback
for browsers without anchor positioning support.
</div>
</div>
</body>
</html>Loading preview...
Position tooltips precisely relative to buttons and interactive elements
Align dropdown menus perfectly with trigger buttons
Context menus and popup content positioned dynamically
Dynamic form field labels that follow input elements