Skip to main content

CSS Z-index — exercises and bug fixes

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

    Raise an element

    easy10 min

    Give #box a z-index of 10 with relative positioning.

  2. 2

    Send an element back

    easy10 min

    Give #box a z-index of -1.

  3. 3

    Stack two elements

    easy10 min

    Put #text above #box.

  4. 4

    Create a stacking context

    easy10 min

    Use opacity to create a context without positioning.

  5. 5

    Layer an absolute element

    medium10 min

    Absolutely position #box and raise it.

Find the bug(5)

  1. 1

    Fix z-index without position

    easy8 min

    z-index is ignored on a static element.

  2. 2

    Fix the misspelled property

    easy8 min

    The property is z-index.

  3. 3

    Fix the value with a unit

    easy8 min

    z-index takes a plain integer.

  4. 4

    Fix the reversed stacking

    easy8 min

    #text should sit above #box.

  5. 5

    Fix the missing negative sign

    easy8 min

    Sending an element behind needs a negative index.

Ready to write the code?

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

Open the workspace