Challenge - Anchor panel

Build a smart dropdown with anchor positioning.

Anchor positioning panel

Anchor positioning lets a dropdown align to the button that opens it. Give the button anchor-name: --btn; write position-anchor: --btn on the panel. The panel is now bound to the button.

Place the panel with declarations like top: anchor(bottom); that aligns it to the button's bottom edge. If it would overflow, position-try switches to fallback positions so the panel stays on screen.

Exercise Build the anchor dropdown panel

Build a dropdown panel. On .menu-button add anchor-name: --btn. On .dropdown add position-anchor: --btn, position: absolute, top: anchor(bottom) and position-try: --flip.

Show example solution

/* menu button */
.menu-button {
  anchor-name: --btn;
}

/* dropdown panel */
.dropdown {
  position-anchor: --btn;
  position: absolute;
  top: anchor(bottom);
  position-try: --flip;
}

Test yourself

Match anchor declarations

anchor-name

Names the button
position-anchor

Binds the panel
anchor()

Computes the position
position-try

Switches to a fallback
Which declaration aligns the panel's top edge to the button's bottom edge?
```
.dropdown {
  position-anchor: --btn;
  /* ??? */
}
```
- top: anchor(top)
- top: anchor(left)
- bottom: anchor(bottom)
- top: anchor(bottom)
Show answer

top: anchor(bottom) — Correct. top: anchor(bottom) binds the panel's top edge to the button's bottom edge.

Write the anchor-name value

.menu-button {
  anchor-name: ____;
}

.dropdown {
  position-anchor: --btn;
}

Show answer

.menu-button {
  anchor-name: --btn;
}

.dropdown {
  position-anchor: --btn;
}

Next lesson: Challenge - Expert capstone

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies