Anchor positioning and popover styling

Anchor positioning and the Popover API. Positioning floating UI relative to a trigger element, with CSS doing the geometry instead of JavaScript measuring rectangles on every scroll and resize.

Anchor positioning basics

Name an anchor on the trigger, reference it from the floating element:

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

.actions-menu {
  position: absolute;
  position-anchor: --actions-trigger;
  inset-area: block-end inline-end;
  margin-block-start: 0.5rem;
}

inset-area places the menu relative to the anchor’s box – below and aligned to the inline end, for example. The browser recalculates on scroll and resize without getBoundingClientRect() in a loop.

Fallback positioning

When the preferred slot overflows the viewport, position-try-fallbacks tries alternatives:

.tooltip {
  position: absolute;
  position-anchor: --info-icon;
  inset-area: block-start;
  position-try-fallbacks:
    block-end,
    inline-start block-end,
    inline-end block-end;
  max-width: 16rem;
}

The tooltip tries above first, then below, then corner variants. Fewer menus clipped off-screen near viewport edges.

Popover API

The popover attribute gives top-layer behaviour, light-dismiss, and focus management hooks. Style it like any panel:

[popover] {
  margin: 0;
  padding: 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  box-shadow: var(--shadow-lg);
  color: inherit;
}

[popover]:popover-open {
  animation: pop-in 0.15s ease;
}

@keyframes pop-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
}

@media (prefers-reduced-motion: reduce) {
  [popover]:popover-open {
    animation: none;
  }
}

Reset default UA styles on [popover] – browsers ship opinionated padding and borders. Pair with anchor positioning for dropdowns tied to buttons.

Anchor + popover together

.share-btn {
  anchor-name: --share;
}

#share-menu {
  position: absolute;
  position-anchor: --share;
  inset-area: block-end inline-start;
  position-try-fallbacks: block-start;
}

HTML wires trigger to popover with popovertarget. CSS handles placement. JavaScript is optional for simple menus.

Accessibility notes

• Popovers in the top layer must still be keyboard reachable and escapable.
• Do not rely on hover alone for critical actions – touch devices exist.
• Match :focus-visible styles on triggers; floating content needs visible focus rings too.

Progressive enhancement

Anchor positioning and popover support are still rolling out. Provide a baseline: absolutely positioned panel near the trigger via a wrapper, or a native <dialog> for modal cases. Enhance with anchors when supported.

The next tutorial covers advanced colour – relative colour syntax, contrast checks, and wide-gamut displays.