Is CSS anchor positioning supported everywhere?

Not yet. It shipped in Chromium browsers and is in progress elsewhere. Always add a fallback with @supports and normal absolute positioning.

What is position-area?

A shorthand that places an anchored element in a region around its anchor, like top, bottom, or top right, without manual offsets.

For placement, no, where anchors are supported. You still need JS or the popover attribute for open and close logic and accessibility.

Tether a badge to a button with anchor-name.

Anchored badge

The badge is positioned to the top-right of the button.

.btn { anchor-name: --btn; }
.badge {
  position: absolute;
  position-anchor: --btn;
  position-area: top right;
}

Show a tooltip below an anchor with no JS coordinates.

Hover tooltip

position-area: bottom places the tooltip under the button.

.tip {
  position: absolute;
  position-anchor: --btn;
  position-area: bottom;
  margin-top: 0.5rem;
}

Keep a usable layout where anchors are unsupported.

Feature query

Anchor positioning enhances placement where supported

Gate anchor rules with @supports and keep a static fallback.

@supports (anchor-name: --x) {
  .badge { position-anchor: --btn; position-area: top right; }
}

Is CSS anchor positioning supported everywhere?: Not yet. It shipped in Chromium browsers and is in progress elsewhere. Always add a fallback with @supports and normal absolute positioning.
What is position-area?: A shorthand that places an anchored element in a region around its anchor, like top, bottom, or top right, without manual offsets.
Do I still need JavaScript for tooltips?: For placement, no, where anchors are supported. You still need JS or the popover attribute for open and close logic and accessibility.