Explore Layering Activity

Edit the CSS in the boxes to match the colored boxes to look like the pictures in the challenges. The TEXTAREA elements can be resized as needed to see the code. Use the pull-tab on the left to open the menu of challenges. Before beginning, you may wish to inspect one of the color boxes below to examine the initial CSS applied to all of the elements with "color" as a class. Click here to reset the styles.

Challenges

Click a challenge title to open its instructions. Click again to close them.

  1. Basic Box Model

    Match the styles with this picture. If you need to see the picture in more detail, right-click and choose "view image" or "open image" to open the full size image.

    Final Display for Challenge 1

  2. Absolute Positions

    Click here to reset the CSS and begin the new challenge. Match the image below. You may wish to inspect the class="workarea" element, which is positioned to provide context for the colored boxes.

    BIG HINT: Start with red, then yellow, then black, so that your colored boxes do not overlap in a way that prevents editing them.

    Final Display for Challenge 2

  3. Basic Layering

    Continue from Challenge #2 without resetting. Add z-index values to adjust the layering of your colored boxes to match the picture below.

    Click here for some basics about the z-index property, and if you need more details, you can start here for a more comprehensive look at stacking context.

    Final Display for Challenge 3

  4. Rainbow Snowman

    Click here to reset the CSS and begin the new challenge. Match the image below. The CSS border-radius property will help.

    Final Display for Challenge 4

  5. Simple House

    Click here to reset the CSS and begin the new challenge. Match the image below. The CSS Triangle method will help.

    Final Display for Challenge 5

  6. Hand of Cards

    Click here to reset the CSS and begin the new challenge. Match the image below. The CSS rotation transformation will help.

    Final Display for Challenge 6

.blue{}
.purple{}
.red{}
.yellow{}
.black{}