# New Possibilities in UI Design with Anchor Positioning API

A new API for dynamic element positioning in web interfaces.

- **Source:** [Josh Comeau](https://www.joshwcomeau.com)
- **Published:** 2026-07-06
- **Topic:** [Design & UX](https://brifing.si/c/design)
- **Original article:** <https://www.joshwcomeau.com/css/anchor-positioning/>
- **On Brifing:** https://brifing.si/s/0cff6954-26c3-40c4-a162-e9ebf0b34c2d

## Introduction

A common UI pattern on the web is having one element stick to another. Tooltips need to float above their targets, dropdown menus need to drop down from their triggers. However, this seemingly simple task can become complex in the details. For example, a tooltip may overflow if the target is at the top of the viewport.

## JavaScript Solutions

In the past, JavaScript was used to solve these issues. However, such code could become complex and hard to maintain. The new Anchor Positioning API offers cleaner and more effective solutions by eliminating these challenges.

## Anchor Positioning API

The Anchor Positioning API provides web developers with a powerful tool for dynamic element positioning. This API simplifies the process of positioning one element relative to another and reduces dependency on JavaScript.

## Anchor and Target Elements

The Anchor Positioning API revolves around two core elements: the Anchor element (the base element to which something is anchored) and the Target element (the element positioned relative to the anchor). The Target element must be set to position: absolute or position: fixed in CSS.

## Anchor Naming

The Anchor element must be identified with a unique name using the anchor-name property. The Target element specifies which anchor element to use with the position-anchor property.

## Positioning Area

The position-area property determines where the Target element should be positioned relative to the Anchor. For example, position-area: top places a tooltip above the anchor.

## Dynamic Positioning

The biggest advantage of the Anchor Positioning API is its dynamic nature. The Target element automatically repositions itself when the container size changes, preventing overflow issues.

## Overflow Scenarios

When the Anchor element is near the top of the viewport, the tooltip may need to appear below it. In such cases, alternative positions can be specified using the position-try-fallbacks property.

## Example Application

An example of using the Anchor Positioning API to dynamically position a tooltip can be demonstrated. This shows how it can be integrated with both CSS and JavaScript.

## Limitations of the API

The Anchor Positioning API is not yet perfect. For instance, the tooltip's caret does not automatically flip when the position changes. Additional solutions are needed for such details.

## Conclusion

The Anchor Positioning API is a significant step forward in dynamic element positioning for web interfaces. This API provides developers with cleaner and more effective solutions, simplifying UI design.

## Sources covering this story

- https://www.joshwcomeau.com/css/anchor-positioning/ — 

---

_Summary written by Brifing from the original reporting. Copyright in the original article belongs to its publisher; read the full piece at the link above._