Welcome to Part 36 of the CSS Mastery & Responsive Layouts Course. In this part, we will explore Anchor Positioning: Connecting Elements.

Positioning floating elements (like tooltips, popovers, context menus, and dropdowns) relative to a trigger button has always been difficult in CSS. When containers have overflow: hidden;, floating tooltips get clipped, forcing developers to use heavy JavaScript positioning libraries. The CSS Anchor Positioning API solves this by letting you declare an element as an “anchor” and position other elements relative to it natively, regardless of DOM hierarchies.

---

Chapter 184: Defining Anchors & Target Elements

To use anchor positioning, you must establish an association between the anchor (trigger) and the positioned element (floating tooltip).

✔ Declaring an Anchor Name

The anchor element is assigned a unique name using the anchor-name property. The name must be formatted as a CSS dashed-indentifier (similar to custom properties):

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

☑ Associating the Floating Element

The positioned element references this name using position-anchor. The floating element must have absolute or fixed positioning:

.tooltip {
  position: fixed;
  position-anchor: --my-trigger-button;
}

---

Chapter 185: Positioning Relative to Anchors (anchor())

Once linked, you position the target using the anchor() function inside positioning properties (top, bottom, left, right).

✔ The anchor() Function Syntax

The function takes the anchor name (optional if already specified in position-anchor) and the edge of the anchor to align with:

• anchor(top): Align to anchor’s top edge.
• anchor(bottom): Align to anchor’s bottom edge.
• anchor(left): Align to anchor’s left edge.
• anchor(right): Align to anchor’s right edge.
• anchor(center): Align to anchor’s horizontal center.

.tooltip {
  position: fixed;
  position-anchor: --my-trigger-button;
  
  /* Place the tooltip's top edge at the anchor's bottom edge */
  top: anchor(bottom);
  /* Center the tooltip horizontally with the anchor */
  left: anchor(center);
  transform: translateX(-50%); /* Centering offset */
}

---

Chapter 186: Handling Overflow & Fallback Positions (position-try-options)

If the anchor element is scrolled close to the edge of the screen, the tooltip could get clipped by the viewport. CSS provides fallback behaviors.

✔ Fallback Try Options

The position-try-options property defines alternate positioning rules if the default position overflows the screen:

.tooltip {
  position: fixed;
  position-anchor: --my-trigger-button;
  
  top: anchor(bottom); /* Default placement */
  left: anchor(left);
  
  /* If bottom placement overflows, try placing it at the top, or flip blockwise */
  position-try-options: flip-block, --try-tooltip-left;
}

/* Custom positioning try rule */
@position-try --try-tooltip-left {
  right: anchor(left);
  top: anchor(top);
}

---

Chapter 187: Anchor Positioning Practice & Self-Check

✔ Practice Exercises

1. Exercise 1: Simple Popover Tooltip: Create an anchor button. Connect a floating card element to it using anchor-name and position-anchor. Position the tooltip directly to the right of the button using left: anchor(right) and add fallback options.

☑ Self-Check Questions

1. What CSS property registers an element as an anchor?
   • Answer: anchor-name.
2. What naming convention is required for anchor names?
   • Answer: They must start with two dashes, e.g., --anchor-name.
3. What positioning types support anchor positioning?
   • Answer: absolute and fixed.
4. Which property associates a positioned element to an anchor element?
   • Answer: position-anchor.
5. How do you align the left edge of a tooltip to the right edge of its anchor?
   • Answer: Set left: anchor(right);.
6. Does anchor positioning work if the anchor is inside an overflow: hidden; parent?
   • Answer: Yes, when using fixed positioning for the target, it escapes parent container clippings.
7. What does position-try-options do?
   • Answer: It defines fallback positions that the browser will automatically try if the element overflows the screen viewport.
8. What does flip-block do inside position-try-options?
   • Answer: It flips the vertical positioning (e.g., switches top: anchor(bottom) to bottom: anchor(top)).
9. What at-rule defines custom fallback styling options?
   • Answer: @position-try.
10. Can you use anchor positioning with CSS logical properties (like start/end)?
    • Answer: Yes, functions like anchor(start) and anchor(end) are fully supported.