Magnetic Blocks

Imagine a tooltip or dropdown menu. Previously we needed JavaScript to calculate their position relative to button. Now there's Anchor Positioning API.

How to Bind Element:

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

.tooltip {
  position: absolute;
  position-anchor: --my-anchor;
  /* Magnetize tooltip bottom to button top */
  bottom: anchor(top);
  left: anchor(center);
}