CSS anchor() Function

The anchor() function allows you to position an element relative to a specific anchor element.

The anchor() function is a core part of the CSS Anchor Positioning API. By linking an absolutely positioned element to a target anchor, you can create tooltips, popovers, and dropdown menus that stay perfectly aligned with their trigger elements, even as the page layout changes or resizes.

To use it, you first define an anchor element using the anchor-name property. Then, on your absolutely positioned element, you use the anchor() function within inset properties (like top, bottom, left, or right) to bind its edges to the corresponding sides of the anchor.

Here is a basic example showing a tooltip positioned directly below an anchor element:

/* 1. Define the anchor element */
  .my-button {
    anchor-name: --tooltip-anchor;
    padding: 10px 20px;
    font-size: 1.2em;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }

/* 2. Position the tooltip relative to the anchor */
  .my-tooltip {
    position: absolute;
    /* Bind the top of the tooltip to the bottom of the button */
    top: anchor(--tooltip-anchor bottom);
    /* Center the tooltip horizontally relative to the button */
    left: anchor(--tooltip-anchor center);
    
    /* Shift it back by 50% of its own width to perfectly center it */
    translate: -50% 10px;
    
    padding: 10px;
    background-color: #333;
    color: white;
    border-radius: 4px;
    font-family: sans-serif;
    font-size: 0.9em;
    white-space: nowrap;
    
    /* Hide by default */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-in-out;
  }
  
  /* Show the tooltip on hover or focus */
  .my-button:hover + .my-tooltip,
  .my-button:focus + .my-tooltip {
    opacity: 1;
    visibility: visible;
  }
  
  .warning-msg {
    font-family: sans-serif;
    font-size: 0.9em;
    color: #d9534f;
    margin-top: 10px;
  }
  
  /* Hide the tooltip completely if anchor positioning isn't supported */
  @supports not (top: anchor(bottom)) {
    .my-tooltip {
      display: none !important;
    }
  }
</style>

<div class="container">
  <button class="my-button">Hover / Focus Me</button>
  <div class="my-tooltip">I am anchored to the button!</div>
</div>

<div class="warning-msg">
  <em>Note: If you do not see a dark tooltip below the button when hovering, your browser does not currently support the CSS Anchor Positioning API.</em>
</div>

View Output Full Screen Preview

How It Works

The anchor() function resolves to a length value. It takes two main arguments: the name of the anchor you want to reference, and the side of the anchor you want to align to.

For example, top: anchor(--my-anchor bottom) tells the browser to set the top edge of the positioned element to exactly match the bottom edge of the element named --my-anchor.

You can also omit the anchor name if you have linked the elements using the position-anchor property. In that case, you only need to specify the side, like anchor(bottom).

Providing a Fallback

You can provide an optional fallback value as the final argument in the anchor() function. If the referenced anchor does not exist (for example, if it was removed from the DOM or has display: none), the browser will use the fallback value instead.

For example: top: anchor(--my-anchor bottom, 50px).

Official Syntax

The official syntax of the anchor() function is as follows:

Possible Values

As indicated in the official syntax, the anchor() function accepts the following values:

anchor-name

An optional dashed-ident (e.g., --my-anchor) that matches the anchor-name property of the target element. If omitted, it defaults to the element specified by the position-anchor property.

anchor-side

Specifies which side of the anchor element to reference. Possible values include:

Physical sides: top, bottom, left, right
Logical sides: start, end, self-start, self-end
Center alignment: center
Percentages: e.g., 50%

length-percentage

An optional fallback length or percentage value to use if the anchor element cannot be resolved.

CSS Specifications

The anchor() function is defined in CSS Anchor Positioning (Editorâ€™s Draft)

Browser Support

The following table provided by Caniuse.com shows the level of browser support for this feature.