CSS Anchor Positioning Guide

/* Define an element as an anchor */
.trigger-button {
  anchor-name: --my-anchor;
}

/* The name must start with two dashes (--) like CSS custom properties */

<!-- HTML -->
<button class="trigger-button">Hover me</button>
<div class="tooltip">I'm a tooltip!</div>

/* CSS */
.trigger-button {
  anchor-name: --tooltip-anchor;
}

.tooltip {
  /* We'll position this relative to the anchor */
  position: fixed;
  position-anchor: --tooltip-anchor;
}

/* Connect an element to an anchor */
.tooltip {
  position: fixed;
  position-anchor: --tooltip-anchor;
}

/* Position tooltip below the anchor */
.tooltip {
  position: fixed;
  position-anchor: --tooltip-anchor;

  /* Position the tooltip's top edge at the anchor's bottom edge */
  top: anchor(bottom);

  /* Center horizontally with the anchor */
  left: anchor(center);
  translate: -50% 0;
}

/* Position tooltip above the anchor */
.tooltip {
  position: fixed;
  position-anchor: --tooltip-anchor;

  /* Position the tooltip's bottom edge at the anchor's top edge */
  bottom: anchor(top);
  left: anchor(center);
  translate: -50% 0;
}

/* Position tooltip to the right of the anchor */
.tooltip {
  position: fixed;
  position-anchor: --tooltip-anchor;

  /* Position the tooltip's left edge at the anchor's right edge */
  left: anchor(right);
  top: anchor(center);
  translate: 0 -50%;
}

/* Position tooltip to the left of the anchor */
.tooltip {
  position: fixed;
  position-anchor: --tooltip-anchor;

  /* Position the tooltip's right edge at the anchor's left edge */
  right: anchor(left);
  top: anchor(center);
  translate: 0 -50%;
}

/* Add spacing between anchor and tooltip */
.tooltip {
  position: fixed;
  position-anchor: --tooltip-anchor;

  /* Use calc() to add offset */
  top: calc(anchor(bottom) + 8px);
  left: anchor(center);
  translate: -50% 0;
}

/* Or use margin */
.tooltip {
  position: fixed;
  position-anchor: --tooltip-anchor;
  top: anchor(bottom);
  left: anchor(center);
  translate: -50% 0;
  margin-top: 8px;
}

/* Position at 25% from the left edge of the anchor */
.tooltip {
  left: anchor(25%);
}

/* Position at 75% from the left edge of the anchor */
.tooltip {
  left: anchor(75%);
}

/* Same as anchor(center) */
.tooltip {
  left: anchor(50%);
}

/* Logical values for inline axis (horizontal in LTR) */
anchor(start)   /* Same as left in LTR, right in RTL */
anchor(end)     /* Same as right in LTR, left in RTL */

/* Logical values for block axis (vertical) */
anchor(self-start)   /* Same as top */
anchor(self-end)     /* Same as bottom */

/* Match the width of the anchor */
.dropdown-menu {
  position: fixed;
  position-anchor: --dropdown-trigger;
  top: anchor(bottom);
  left: anchor(left);

  /* Set width equal to anchor's width */
  width: anchor-size(width);
}

/* Set minimum width to anchor's width */
.dropdown-menu {
  min-width: anchor-size(width);
}

/* Use anchor's height */
.side-panel {
  height: anchor-size(height);
}

/* Try flipping to opposite side if needed */
.tooltip {
  position: fixed;
  position-anchor: --my-anchor;

  /* Primary position: below the anchor */
  top: anchor(bottom);
  left: anchor(center);
  translate: -50% 0;

  /* Fallback: flip to above if no room below */
  position-try-fallbacks: flip-block;
}

/* Define custom fallback positions */
@position-try --bottom-right {
  top: anchor(bottom);
  left: anchor(right);
}

@position-try --top-center {
  bottom: anchor(top);
  left: anchor(center);
  translate: -50% 0;
}

@position-try --left-center {
  right: anchor(left);
  top: anchor(center);
  translate: 0 -50%;
}

.tooltip {
  position: fixed;
  position-anchor: --my-anchor;

  /* Primary position */
  top: anchor(bottom);
  left: anchor(center);
  translate: -50% 0;

  /* Custom fallbacks in order of preference */
  position-try-fallbacks: --top-center, --left-center, --bottom-right;
}

/* Try fallbacks based on available space */
.tooltip {
  position-try-order: most-height;  /* Prefer position with most vertical space */
}

.tooltip {
  position-try-order: most-width;   /* Prefer position with most horizontal space */
}

.tooltip {
  position-try-order: most-block-size;  /* Logical: most block space */
}

.tooltip {
  position-try-order: most-inline-size; /* Logical: most inline space */
}

// Feature detection for anchor positioning
const supportsAnchorPositioning = CSS.supports('anchor-name', '--test');

if (!supportsAnchorPositioning) {
  // Use Floating UI, Popper.js, or custom positioning
  import('floating-ui').then(({ computePosition }) => {
    // Set up JavaScript-based positioning
  });
}

// Or use CSS @supports
@supports (anchor-name: --test) {
  .tooltip {
    position: fixed;
    position-anchor: --my-anchor;
    top: anchor(bottom);
  }
}

@supports not (anchor-name: --test) {
  .tooltip {
    /* Fallback static positioning */
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
  }
}