css-anchor-positioning.md

CSS Anchor Positioning

• 2025-02-25 — Better Anchor Positioning with position-area
• 2024-11-18 — Anchor Positioning Is Disruptive
• 2024-02-09 — Editor’s Draft
• 2024-04-12 — Chromium Intent to Ship: CSS Anchor Positioning
  • Una's anchor-tool
  • Una's bunch of demos
  • inset-area demo exploration
  • csswg-drafts > css-anchor-position-1
  • Chromium tracking bug
  • Mozilla tracking bug
  • Explainer: CSS Anchor Positioning
  • #9663 Better handle an inset-area edge case
  • Tracking bug for implementation of Anchor Positioning feature
  • WebKit Position
  • Mozilla Position
• Tether elements to each other with CSS anchor positioning by Jhey Tompkins (one of the spec editors)
• 2023-03-15 — Future CSS: Anchor Positioning
• 2023-06-29 — First Working Draft
• 2023-12-14 — Anchor Positioning ⭐
• 2021-03-06 — First Proposal by Melanie Richards (Microsoft)

.anchor {
  anchor-name: --my-anchor;
}

.tooltip {
  /* Fixpos means we don’t need to worry about
     containing block relationships;
     the tooltip can live anywhere in the DOM. */
  position: fixed;

  /* All the anchoring behavior will default to
     referring to the --tooltip anchor. */
  position-anchor: --tooltip;

  /* Align the tooltip’s bottom to the top of the anchor;
     this also defaults to horizontally center-aligning
     the tooltip and the anchor (in horizontal writing modes). */
  inset-area: block-start;

  /* Automatically swap if this overflows the window
    so the tooltip’s top aligns to the anchor’s bottom
    instead. */
  position-try: flip-block;

  /* Prevent getting too wide */
  max-inline-size: 20em;
}

Update April 2024: here is all the code you need to get a basic anchor now:

#my-tooltip {
  /*  Set the bottom of the anchored element (tooltip) to the top of the anchoring element  */
  bottom: calc(anchor(top));
  /*  If can't fit it in the screen anymore, flip the anchored element in the block direction */
  position-try-options: flip-block;
  /*  Center the anchor with justification  */
  justify-self: anchor-center;
}

• 3 lines of CSS to make your tooltips/menus stay in view 🤯

[popover] {
  top: anchor(top);
  left: anchor(right);
  position-try-options: flip-block, flip-inline;
}