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; }