What is anchor positioning?

Learn CSS anchor positioning basics.

What is anchor positioning?

CSS anchor positioning is a declarative way to place one element relative to another. The first element becomes the anchor; the second binds to it and follows it. It is designed for dropdown menus, tooltips, and info popovers.

Placing a menu under a button used to need JavaScript offset math. Anchor positioning moves that math into CSS; on scroll and resize the menu stays put automatically.

Anchor and positioned element

Anchor positioning brings two roles together. The anchor is the reference point; typically a button, link, or info icon. The positioned element is the tooltip, dropdown, or popover bound to the anchor.

The anchor sits in the normal flow. The positioned element must be position: absolute or position: fixed; anchor positioning works only on positioned elements.

Why it matters

Anchor positioning has three advantages. First, you drop the JavaScript offset math; the position is fully defined in CSS. Second, when the anchor scrolls or the window resizes, the positioned element stays in place automatically.

Third, collision resolution is built in; if the element would overflow the viewport, the browser tries another position. All of this arrives step by step in the next lessons.

Exercise Set up the popover base

Write a .popover selector. The block must contain position: absolute and background: white. This is the positioned-element base that anchor positioning requires.

Show example solution

/* popover base */
.popover {
  position: absolute;
  background: white;
}

Test yourself

What does anchor positioning let you do?
- Smooth out color transitions
- Shrink CSS file size
- Bind one element to an anchor and have it follow
- Prevent page scrolling
Show answer

Bind one element to an anchor and have it follow — Correct. The bound element follows the anchor automatically as the anchor moves.

The positioned element's position value

.popover {
  position: ____;
  background: white;
}

Show answer

.popover {
  position: absolute;
  background: white;
}

Next lesson: Anchor-name

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies