Create the anchor context — practice exercise

What you'll be asked to do

1. 1.Create the anchor contextexercise · easy · 10 min

   Make #wrap the positioning context.

   Passes when: Make #wrap the positioning context.

2. 2.Pin to the bottom-rightexercise · easy · 10 min · practice plan

   Place #box at the bottom right of its context.

   Passes when: Place #box at the bottom right of its context.

3. 3.Offset from an edgeexercise · easy · 10 min · practice plan

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

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

4. 4.Stretch across the contextexercise · easy · 10 min · practice plan

   Use inset 0 so #box fills its positioned parent.

   Passes when: Use inset 0 so #box fills its positioned parent.

5. 5.Raise the anchored elementexercise · medium · 10 min · practice plan

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

   Passes when: Pin it and lift it above siblings with z-index.

6. 6.Fix the missing contextbug fix · easy · 8 min

   Without a positioned parent the box anchors to the page.

   Passes when: Without a positioned parent the box anchors to the page.

7. 7.Fix the wrong edgesbug fix · easy · 8 min · practice plan

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

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

8. 8.Fix the z-index without positionbug fix · easy · 8 min · practice plan

   z-index is ignored on a static element.

   Passes when: z-index is ignored on a static element.

9. 9.Fix inset written as a single edgebug fix · easy · 8 min · practice plan

   inset sets all four edges at once.

   Passes when: inset sets all four edges at once.

10. 10.Fix the swapped offsetsbug fix · easy · 8 min · practice plan

    The top and left values are the wrong way round.

    Passes when: The top and left values are the wrong way round.

Between them these tasks cover Positioning relative to another element, inset and Fallback techniques.

Looking for a different chapter? See every practice set, or switch to the interview theory questions.