coderef

Anchor positioningLimited availability

Anchor positioning places an element based on the position of another element. For example, you can place a tooltip next to the content it references.

Not yet supported in all major browsers — check the table and provide a fallback.

How to use ↓Compare browsers

Browser support

DesktopChrome
✕Not supportedup to 155
Current: 155
Edge
✕Not supportedup to 154
Current: 154
Firefox
✕Not supportedup to 157
Current: 157
Safari
1–26.6Not supported
27+Supportedsince Sep 14, 2026
Current: 27
MobileChrome Android
✕Not supportedup to 155
Current: 155
Firefox Android
✕Not supportedup to 157
Current: 157
Safari iOS
1–26.6Not supported
27+Supportedsince Sep 14, 2026
Current: 27

How to use

Not supported in Chrome, Edge, Firefox, Chrome Android, Firefox Android. Use feature detection below and provide a fallback (or a polyfill) for those browsers.

Example

CSS
.trigger {
  anchor-name: --menu-anchor;
}

.menu {
  position: absolute;
  position-anchor: --menu-anchor;
  top: anchor(bottom);
  left: anchor(left);
  position-try-fallbacks: flip-block;
}

Feature detection

CSS · check before using
@supports (anchor-name: initial) {
  /* styles that rely on anchor-name */
}

/* or in JavaScript */
if (CSS.supports("anchor-name", "initial")) {
  // use it
}

Documentation (MDN)

Specification

Usage share

Sub-features

Support for each part of the feature (325). The overall table above shows when the whole feature works.

Sub-featureChromeEdgeFirefoxSafariChrome AndroidFirefox AndroidSafari iOS
CSSPositionTryDescriptors1251251472612514726
CSSPositionTryDescriptors.align-self1251251472612514726
CSSPositionTryDescriptors.alignSelf1251251472612514726
CSSPositionTryDescriptors.block-size1251251472612514726
CSSPositionTryDescriptors.blockSize1251251472612514726
CSSPositionTryDescriptors.bottom1251251472612514726
CSSPositionTryDescriptors.height1251251472612514726
CSSPositionTryDescriptors.inline-size1251251472612514726
CSSPositionTryDescriptors.inlineSize1251251472612514726
CSSPositionTryDescriptors.inset1251251472612514726
CSSPositionTryDescriptors.inset-block1251251472612514726
CSSPositionTryDescriptors.inset-block-end1251251472612514726
CSSPositionTryDescriptors.inset-block-start1251251472612514726
CSSPositionTryDescriptors.inset-inline1251251472612514726
CSSPositionTryDescriptors.inset-inline-end1251251472612514726
CSSPositionTryDescriptors.inset-inline-start1251251472612514726
CSSPositionTryDescriptors.insetBlock1251251472612514726
CSSPositionTryDescriptors.insetBlockEnd1251251472612514726
CSSPositionTryDescriptors.insetBlockStart1251251472612514726
CSSPositionTryDescriptors.insetInline1251251472612514726
Show 305 more
Sub-featureChromeEdgeFirefoxSafariChrome AndroidFirefox AndroidSafari iOS
CSSPositionTryDescriptors.insetInlineEnd1251251472612514726
CSSPositionTryDescriptors.insetInlineStart1251251472612514726
CSSPositionTryDescriptors.justify-self1251251472612514726
CSSPositionTryDescriptors.justifySelf1251251472612514726
CSSPositionTryDescriptors.left1251251472612514726
CSSPositionTryDescriptors.margin1251251472612514726
CSSPositionTryDescriptors.margin-block1251251472612514726
CSSPositionTryDescriptors.margin-block-end1251251472612514726
CSSPositionTryDescriptors.margin-block-start1251251472612514726
CSSPositionTryDescriptors.margin-bottom1251251472612514726
CSSPositionTryDescriptors.margin-inline1251251472612514726
CSSPositionTryDescriptors.margin-inline-end1251251472612514726
CSSPositionTryDescriptors.margin-inline-start1251251472612514726
CSSPositionTryDescriptors.margin-left1251251472612514726
CSSPositionTryDescriptors.margin-right1251251472612514726
CSSPositionTryDescriptors.margin-top1251251472612514726
CSSPositionTryDescriptors.marginBlock1251251472612514726
CSSPositionTryDescriptors.marginBlockEnd1251251472612514726
CSSPositionTryDescriptors.marginBlockStart1251251472612514726
CSSPositionTryDescriptors.marginBottom1251251472612514726
CSSPositionTryDescriptors.marginInline1251251472612514726
CSSPositionTryDescriptors.marginInlineEnd1251251472612514726
CSSPositionTryDescriptors.marginInlineStart1251251472612514726
CSSPositionTryDescriptors.marginLeft1251251472612514726
CSSPositionTryDescriptors.marginRight1251251472612514726
CSSPositionTryDescriptors.marginTop1251251472612514726
CSSPositionTryDescriptors.max-block-size1251251472612514726
CSSPositionTryDescriptors.max-height1251251472612514726
CSSPositionTryDescriptors.max-inline-size1251251472612514726
CSSPositionTryDescriptors.max-width1251251472612514726
CSSPositionTryDescriptors.maxBlockSize1251251472612514726
CSSPositionTryDescriptors.maxHeight1251251472612514726
CSSPositionTryDescriptors.maxInlineSize1251251472612514726
CSSPositionTryDescriptors.maxWidth1251251472612514726
CSSPositionTryDescriptors.min-block-size1251251472612514726
CSSPositionTryDescriptors.min-height1251251472612514726
CSSPositionTryDescriptors.min-inline-size1251251472612514726
CSSPositionTryDescriptors.min-width1251251472612514726
CSSPositionTryDescriptors.minBlockSize1251251472612514726
CSSPositionTryDescriptors.minHeight1251251472612514726
CSSPositionTryDescriptors.minInlineSize1251251472612514726
CSSPositionTryDescriptors.minWidth1251251472612514726
CSSPositionTryDescriptors.place-self1251251472612514726
CSSPositionTryDescriptors.placeSelf1251251472612514726
CSSPositionTryDescriptors.position-anchor1251251472612514726
CSSPositionTryDescriptors.position-area1291291472612914726
CSSPositionTryDescriptors.positionAnchor1251251472612514726
CSSPositionTryDescriptors.positionArea1291291472612914726
CSSPositionTryDescriptors.right1251251472612514726
CSSPositionTryDescriptors.top1251251472612514726
CSSPositionTryDescriptors.width1251251472612514726
CSSPositionTryRule1251251472612514726
CSSPositionTryRule.name1251251472612514726
CSSPositionTryRule.style1251251472612514726
HTMLButtonElement.commandForElement.implicit_anchor_reference13513514726.213514726.2
HTMLButtonElement.popoverTargetElement.implicit_anchor_reference1331331472613314726
HTMLElement.showPopover.options_source_parameter.implicit_anchor_reference1371371472613714726
HTMLElement.togglePopover.options_source_parameter.implicit_anchor_reference1371371472613714726
HTMLInputElement.popoverTargetElement.implicit_anchor_reference1331331472613314726
@position-try1251251472612514726
align-items.anchor-center1251251472612514726
align-self.anchor-center1251251472612514726
anchor-name1251251472612514726
anchor-name.none1251251472612514726
anchor-scope1311311472613114726
anchor-scope.all1311311472613114726
anchor-scope.none1311311472613114726
block-size.anchor-size1251251472612514726
bottom.anchor1251251472612514726
bottom.anchor-size1321321472613214726
height.anchor-size1251251472612514726
inline-size.anchor-size1251251472612514726
inset-block-end.anchor1251251472612514726
inset-block-end.anchor-size1321321472613214726
inset-block-start.anchor1251251472612514726
inset-block-start.anchor-size1321321472613214726
inset-block.anchor1251251472612514726
inset-block.anchor-size1321321472613214726
inset-inline-end.anchor1251251472612514726
inset-inline-end.anchor-size1321321472613214726
inset-inline-start.anchor1251251472612514726
inset-inline-start.anchor-size1321321472613214726
inset-inline.anchor1251251472612514726
inset-inline.anchor-size1321321472613214726
inset.anchor1251251472612514726
inset.anchor-size1321321472613214726
justify-items.anchor-center1251251472612514726
justify-self.anchor-center1251251472612514726
left.anchor1251251472612514726
left.anchor-size1321321472613214726
margin-block-end.anchor-size1321321472613214726
margin-block-start.anchor-size1321321472613214726
margin-block.anchor-size1321321472613214726
margin-bottom.anchor-size1321321472613214726
margin-inline-end.anchor-size1321321472613214726
margin-inline-start.anchor-size1321321472613214726
margin-inline.anchor-size1321321472613214726
margin-left.anchor-size1321321472613214726
margin-right.anchor-size1321321472613214726
margin-top.anchor-size1321321472613214726
margin.anchor-size1321321472613214726
max-block-size.anchor-size1251251472612514726
max-height.anchor-size1251251472612514726
max-inline-size.anchor-size1251251472612514726
max-width.anchor-size1251251472612514726
min-block-size.anchor-size1251251472612514726
min-height.anchor-size1251251472612514726
min-inline-size.anchor-size1251251472612514726
min-width.anchor-size1251251472612514726
place-items.anchor-center1251251472612514726
place-self.anchor-center1251251472612514726
position-anchor1511511512715115127
position-anchor.auto1511511512715115127
position-anchor.none1511511512715115127
position-anchor.normal1511511512715115127
position-area1291291472612914726
position-area.block-end1441441482614414826
position-area.block-start1441441482614414826
position-area.bottom1441441482614414826
position-area.center1291291472612914726
position-area.disables_auto_margins_and_insets14314314826.214314826.2
position-area.end1441441482614414826
position-area.inline-end1441441482614414826
position-area.inline-start1441441482614414826
position-area.left1441441482614414826
position-area.none1291291472612914726
position-area.right1441441482614414826
position-area.self-block-end1441441482614414826
position-area.self-block-start1441441482614414826
position-area.self-end1441441482614414826
position-area.self-inline-end1441441482614414826
position-area.self-inline-start1441441482614414826
position-area.self-start1441441482614414826
position-area.self-x-end14414414826.214414826.2
position-area.self-x-start14414414826.214414826.2
position-area.self-y-end14414414826.214414826.2
position-area.self-y-start14414414826.214414826.2
position-area.span-all1441441482614414826
position-area.span-block-end1291291472612914726
position-area.span-block-start1291291472612914726
position-area.span-bottom1291291472612914726
position-area.span-end1291291472612914726
position-area.span-inline-end1291291472612914726
position-area.span-inline-start1291291472612914726
position-area.span-left1291291472612914726
position-area.span-right1291291472612914726
position-area.span-self-block-end1291291472612914726
position-area.span-self-block-start1291291472612914726
position-area.span-self-end1291291472612914726
position-area.span-self-inline-end1291291472612914726
position-area.span-self-inline-start1291291472612914726
position-area.span-self-start1291291472612914726
position-area.span-self-x-end14314314726.214314726.2
position-area.span-self-x-start14314314726.214314726.2
position-area.span-self-y-end14314314726.214314726.2
position-area.span-self-y-start14314314726.214314726.2
position-area.span-start1291291472612914726
position-area.span-top1291291472612914726
position-area.span-x-end1291291472612914726
position-area.span-x-start1291291472612914726
position-area.span-y-end1291291472612914726
position-area.span-y-start1291291472612914726
position-area.start1291291472612914726
position-area.top1441441482614414826
position-area.x-end1441441482614414826
position-area.x-start1441441482614414826
position-area.y-end1441441482614414826
position-area.y-start1441441482614414826
position-try1251251472612514726
position-try-fallbacks1281281472612814726
position-try-fallbacks.block-end1291291472612914726
position-try-fallbacks.block-start1291291472612914726
position-try-fallbacks.bottom1291291472612914726
position-try-fallbacks.center1291291472612914726
position-try-fallbacks.end1291291472612914726
position-try-fallbacks.flip-block1281281472612814726
position-try-fallbacks.flip-inline1281281472612814726
position-try-fallbacks.flip-start1281281472612814726
position-try-fallbacks.flip-x14414414726.214414726.2
position-try-fallbacks.flip-y14414414726.214414726.2
position-try-fallbacks.inline-end1291291472612914726
position-try-fallbacks.inline-start1291291472612914726
position-try-fallbacks.left1291291472612914726
position-try-fallbacks.none1281281472612814726
position-try-fallbacks.position-area1281281472612814726
position-try-fallbacks.right1291291472612914726
position-try-fallbacks.self-block-end1291291472612914726
position-try-fallbacks.self-block-start1291291472612914726
position-try-fallbacks.self-end1291291472612914726
position-try-fallbacks.self-inline-end1291291472612914726
position-try-fallbacks.self-inline-start1291291472612914726
position-try-fallbacks.self-start1291291472612914726
position-try-fallbacks.self-x-end14414414826.214414826.2
position-try-fallbacks.self-x-start14414414826.214414826.2
position-try-fallbacks.self-y-end14414414826.214414826.2
position-try-fallbacks.self-y-start14414414826.214414826.2
position-try-fallbacks.span-all1291291472612914726
position-try-fallbacks.span-block-end1291291472612914726
position-try-fallbacks.span-block-start1291291472612914726
position-try-fallbacks.span-bottom1291291472612914726
position-try-fallbacks.span-end1291291472612914726
position-try-fallbacks.span-inline-end1291291472612914726
position-try-fallbacks.span-inline-start1291291472612914726
position-try-fallbacks.span-left1291291472612914726
position-try-fallbacks.span-right1291291472612914726
position-try-fallbacks.span-self-block-end1291291472612914726
position-try-fallbacks.span-self-block-start1291291472612914726
position-try-fallbacks.span-self-end1291291472612914726
position-try-fallbacks.span-self-inline-end1291291472612914726
position-try-fallbacks.span-self-inline-start1291291472612914726
position-try-fallbacks.span-self-start1291291472612914726
position-try-fallbacks.span-self-x-end14314314726.214314726.2
position-try-fallbacks.span-self-x-start14314314726.214314726.2
position-try-fallbacks.span-self-y-end14314314726.214314726.2
position-try-fallbacks.span-self-y-start14314314726.214314726.2
position-try-fallbacks.span-start1291291472612914726
position-try-fallbacks.span-top1291291472612914726
position-try-fallbacks.span-x-end1291291472612914726
position-try-fallbacks.span-x-start1291291472612914726
position-try-fallbacks.span-y-end1291291472612914726
position-try-fallbacks.span-y-start1291291472612914726
position-try-fallbacks.start1291291472612914726
position-try-fallbacks.top1291291472612914726
position-try-fallbacks.x-end1291291472612914726
position-try-fallbacks.x-start1291291472612914726
position-try-fallbacks.y-end1291291472612914726
position-try-fallbacks.y-start1291291472612914726
position-try-order1251251482612514826
position-try-order.most-block-size1251251482612514826
position-try-order.most-height1251251482612514826
position-try-order.most-inline-size1251251482612514826
position-try-order.most-width1251251482612514826
position-try-order.normal1251251482612514826
position-try.block-end1291291472612914726
position-try.block-start1291291472612914726
position-try.bottom1291291472612914726
position-try.center1291291472612914726
position-try.end1291291472612914726
position-try.flip-block1251251472612514726
position-try.flip-inline1251251472612514726
position-try.flip-start1251251472612514726
position-try.flip-x14414414726.214414726.2
position-try.flip-y14414414726.214414726.2
position-try.inline-end1291291472612914726
position-try.inline-start1291291472612914726
position-try.left1291291472612914726
position-try.none1251251472612514726
position-try.right1291291472612914726
position-try.self-block-end1291291472612914726
position-try.self-block-start1291291472612914726
position-try.self-end1291291472612914726
position-try.self-inline-end1291291472612914726
position-try.self-inline-start1291291472612914726
position-try.self-start1291291472612914726
position-try.self-x-end14414414826.214414826.2
position-try.self-x-start14414414826.214414826.2
position-try.self-y-end14414414826.214414826.2
position-try.self-y-start14414414826.214414826.2
position-try.span-all1291291472612914726
position-try.span-block-end1291291472612914726
position-try.span-block-start1291291472612914726
position-try.span-bottom1291291472612914726
position-try.span-end1291291472612914726
position-try.span-inline-end1291291472612914726
position-try.span-inline-start1291291472612914726
position-try.span-left1291291472612914726
position-try.span-right1291291472612914726
position-try.span-self-block-end1291291472612914726
position-try.span-self-block-start1291291472612914726
position-try.span-self-end1291291472612914726
position-try.span-self-inline-end1291291472612914726
position-try.span-self-inline-start1291291472612914726
position-try.span-self-start1291291472612914726
position-try.span-self-x-end14314314726.214314726.2
position-try.span-self-x-start14314314726.214314726.2
position-try.span-self-y-end14314314726.214314726.2
position-try.span-self-y-start14314314726.214314726.2
position-try.span-start1291291472612914726
position-try.span-top1291291472612914726
position-try.span-x-end1291291472612914726
position-try.span-x-start1291291472612914726
position-try.span-y-end1291291472612914726
position-try.span-y-start1291291472612914726
position-try.start1291291472612914726
position-try.top1291291472612914726
position-try.x-end1291291472612914726
position-try.x-start1291291472612914726
position-try.y-end1291291472612914726
position-try.y-start1291291472612914726
position-visibility12512514726.212514726.2
position-visibility.always12512514726.212514726.2
position-visibility.anchor-valid✕✕✕27✕✕27
position-visibility.anchor-visible✕✕✕27✕✕27
position-visibility.no-overflow12512514726.212514726.2
right.anchor1251251472612514726
right.anchor-size1321321472613214726
top.anchor1251251472612514726
top.anchor-size1321321472613214726
width.anchor-size1251251472612514726
<anchor>1251251472612514726
<anchor-size>1251251472612514726
<anchor-size>.inset_margin1321321472613214726
button.commandfor.implicit_anchor_reference13513514726.213514726.2
button.popovertarget.implicit_anchor_reference1331331472613314726
input.popovertarget.implicit_anchor_reference1331331472613314726