Skip to main content

CSS Position — exercises and bug fixes

5 hands-on exercises and 5 find-the-bug challenges for the CSS Position 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

    Shift with relative

    easy10 min

    Move #box 10px down without leaving the flow.

  2. 2

    Position absolutely

    easy10 min

    Pin #box to the top-left of its positioned parent.

  3. 3

    Pin to the viewport

    easy10 min

    Make #box fixed.

  4. 4

    Stick on scroll

    easy10 min

    Make #box sticky with a top offset.

  5. 5

    Use the inset shorthand

    medium10 min

    Absolutely position #box 12px from every edge.

Find the bug(5)

  1. 1

    Fix the sticky with no offset

    easy8 min

    Sticky does nothing without a top offset.

  2. 2

    Fix the missing positioning context

    easy8 min

    The absolute box escapes to the page without a positioned parent.

  3. 3

    Fix fixed used instead of sticky

    easy8 min

    This should stay in flow until it reaches the top.

  4. 4

    Fix the offset without a position

    easy8 min

    Offsets do nothing on a static element.

  5. 5

    Fix the misspelled value

    easy8 min

    The value is absolute.

Ready to write the code?

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

Open the workspace