Anchor Positioning in CSS

/* Step 1: name an anchor */
.button {
  anchor-name: --trigger;
}

/* Step 2: position something relative to that anchor */
.tooltip {
  position: absolute;
  position-anchor: --trigger;

  /* Place below the anchor, centered */
  top: anchor(bottom);
  left: anchor(center);
  translate: -50%;
}

/* Or use the high-level shorthand */
.popover {
  position: absolute;
  position-anchor: --trigger;
  position-area: bottom span-all;     /* below, full width */
}