Skip to main content

Anchor Positioning — exercises and bug fixes

5 hands-on exercises and 5 find-the-bug challenges for the Anchor Positioning lesson. Every one is checked automatically in the browser — write the code, run it, and the tests tell you what still fails.

Sign in to start solvingCreate a free account

Exercises(5)

  1. 1

    Create the anchor context

    easy10 min

    Make #wrap the positioning context.

  2. 2

    Pin to the bottom-right

    easy10 min

    Place #box at the bottom right of its context.

  3. 3

    Offset from an edge

    easy10 min

    Place #box 16px from the top and 24px from the left.

  4. 4

    Stretch across the context

    easy10 min

    Use inset 0 so #box fills its positioned parent.

  5. 5

    Raise the anchored element

    medium10 min

    Pin it and lift it above siblings with z-index.

Find the bug(5)

  1. 1

    Fix the missing context

    easy8 min

    Without a positioned parent the box anchors to the page.

  2. 2

    Fix the wrong edges

    easy8 min

    The box should sit bottom-right, not top-left.

  3. 3

    Fix the z-index without position

    easy8 min

    z-index is ignored on a static element.

  4. 4

    Fix inset written as a single edge

    easy8 min

    inset sets all four edges at once.

  5. 5

    Fix the swapped offsets

    easy8 min

    The top and left values are the wrong way round.

Ready to write the code?

The editor, the automatic checks and the worked solutions open up with an account.

Open the workspace