CodeBlanks Logo Icon CodeBlanks
Login Register

Anchor() function

CSS course · Expert · Lesson 40/53

Learn positioning with the anchor() function.

The anchor() function

The anchor() function returns a position value relative to the anchor's edges. Writing top: anchor(bottom); aligns the element's top edge with the anchor's bottom edge. This is the natural way to place a tooltip below a button.

The keyword inside the parentheses names an anchor edge: top, bottom, left, right, start, end, center. You write whichever edge the element should align to.

anchor() keywords

The most common anchor() keywords are: top, bottom, left, right for the anchor edges, and center for the anchor's middle. start and end map to left or right based on writing direction.

Two axes combine. For example, top: anchor(bottom); left: anchor(center); places the element below the anchor, centered horizontally. This is the classic dropdown placement.

Exercise Place the tooltip below the anchor

Write a .tooltip selector. The block must contain position-anchor: --info-button and top: anchor(bottom). This places the tooltip below the button.

Show example solution 
/* place the tooltip below the anchor */
.tooltip {
  position-anchor: --info-button;
  top: anchor(bottom);
}

Test yourself

  1. What does <code>top: anchor(bottom)</code> do?

    .tooltip {
  position: absolute;
  position-anchor: --info;
  top: anchor(bottom);
}
    • It pins the tooltip to the anchor's top edge
    • It pins the tooltip to the anchor's center
    • It places the tooltip at the same spot as the anchor
    • It aligns the tooltip's top edge with the anchor's bottom edge
    Show answer

    It aligns the tooltip's top edge with the anchor's bottom edge — Correct. top: anchor(bottom) aligns the element's top edge with the anchor's bottom edge; the tooltip goes below.

  2. Place the tooltip below the anchor

    .tooltip {
  position-anchor: --info;
  top: anchor(____);
}
    Show answer 
    .tooltip {
  position-anchor: --info;
  top: anchor(bottom);
}

  3. Match each anchor() keyword to its position

    anchor(bottom)
    Anchor's bottom edge
    anchor(top)
    Anchor's top edge
    anchor(center)
    Anchor's center
    anchor(right)
    Anchor's right edge

All lessons in Expert

1 CSS architecture

  1. BEM methodology
  2. CSS organization
  3. Specificity management
  4. Cascade layers
  5. Modular CSS
  6. Summary - Component library

2 CSS performance

  1. What is CSS performance?
  2. Selector performance
  3. Layout and paint
  4. Will-change
  5. Contain
  6. Summary - Fast card list

3 CSS Houdini

  1. What is Houdini?
  2. Paint API
  3. Layout API
  4. Properties and values API
  5. Typed OM
  6. Summary - Custom background pattern

4 Advanced container queries

  1. Container-type in depth
  2. Container-name
  3. Container query units
  4. Container style
  5. Container components
  6. Summary - Responsive widget system

5 View transitions

  1. What are view transitions?
  2. ::view-transition
  3. View-transition-name
  4. Transition animations
  5. Cross-document transitions
  6. Summary - Transitional gallery

6 Scroll-driven animations

  1. Scroll-driven animations
  2. Scroll function
  3. View function
  4. Timeline attachment
  5. Scroll-snap
  6. Summary - Scroll story

7 Anchor positioning

  1. What is anchor positioning?
  2. Anchor-name
  3. Position-anchor
  4. Anchor() function
  5. Position-try
  6. Summary - Dropdown panel

8 CSS nesting

  1. What is CSS nesting?
  2. & nesting selector
  3. Nested media
  4. Nested pseudo
  5. Nested compound
  6. Summary - Component style

9 Expert final

  1. Challenge - BEM architecture
  2. Challenge - Container system
  3. Challenge - View transitions
  4. Challenge - Anchor panel
  5. Challenge - Expert capstone