demo · v131

anchor-size() in inset and margin

The tooltip below uses width: anchor-size(width) and margin-bottom: anchor-size(height) — so as you resize the anchor the tooltip stays exactly its width and floats one anchor-height above it. Drag the slider.

Checking support for margin-bottom: anchor-size(height).
tooltip = anchor-size(width) wide, anchor-size(height) above
calc() inset = 25% anchor-height below, 50% across
drag the slider to resize me
Waiting for layout measurements.

the css

.stage {
  /* Unsupported browsers get this centered fallback first. */
  --anchor-width: 220px;
  --fallback-anchor-height: 4.5rem;
}

@supports ((margin-bottom: anchor-size(height)) and (width: anchor-size(width))) {
  .anchor { anchor-name: --tooltip; }
  .tip.primary {
    position-anchor: --tooltip;
    bottom: anchor(top);
    left: anchor(left);
    margin-bottom: anchor-size(height);
    width: anchor-size(width);
  }
  .tip.calc {
    top: calc(anchor(bottom) + (anchor-size(height) * 0.25));
    left: calc(anchor(left) + (anchor-size(width) * 0.5));
    width: calc(anchor-size(width) * 0.7);
  }
}

see also