Common layering issues in CSS - Mini Project: Build & Apply

Fixing Common Layering Issues with CSS Z-Index

📖 Scenario: You are creating a simple webpage with three colored boxes stacked on top of each other. However, the boxes are not layering as expected. You need to fix the layering using CSS z-index so that the red box is on top, the green box is in the middle, and the blue box is at the bottom.

🎯 Goal: Build a webpage with three overlapping colored boxes using div elements. Use CSS positioning and z-index to control the layering order so the red box appears on top, the green box in the middle, and the blue box at the bottom.

📋 What You'll Learn

Create three div elements with classes box-red, box-green, and box-blue.

Each box should have a fixed size of 8rem by 8rem and be positioned absolutely with some overlap.

Use CSS z-index to layer the boxes so red is on top, green is in the middle, and blue is at the bottom.

Use semantic HTML structure and include a <main> container for the boxes.

Ensure the layering works correctly in a modern browser.

💡 Why This Matters

🌍 Real World

Layering elements correctly is important for building user interfaces where items overlap, such as modals, dropdowns, and tooltips.

💼 Career

Understanding CSS layering and z-index is a fundamental skill for front-end developers to create visually correct and accessible web pages.

1

Create the HTML structure with three colored boxes

Create a <main> element containing three <div> elements with classes box-red, box-green, and box-blue. Each box will represent a colored square.

CSS

Need a hint?

Use three <div> elements inside <main>. Assign the exact classes box-red, box-green, and box-blue.

2

Add CSS to size and position the boxes with overlap

Add CSS rules to make each box 8rem wide and tall, position them absolutely inside main, and place them so they overlap partially. Use position: relative on main and position: absolute on each box with different top and left values.

CSS

  
  
  



  main {
    position: relative;
  }
  /* Add CSS for .box-red, .box-green, .box-blue here */

Need a hint?

Set position: relative on main. Then set position: absolute, width, and height on each box. Use different top and left values to overlap them.

3

Add z-index to control layering order

Add CSS z-index properties to the boxes so that .box-red has the highest z-index, .box-green has a middle z-index, and .box-blue has the lowest z-index. Use integer values to set the layering order.

CSS

  
  
  



  main {
    position: relative;
    width: 20rem;
    height: 12rem;
  }
  .box-red, .box-green, .box-blue {
    width: 8rem;
    height: 8rem;
    position: absolute;
  }
  .box-red {
    background-color: red;
    top: 0;
    left: 6rem;
    /* Add z-index here */
  }
  .box-green {
    background-color: green;
    top: 2rem;
    left: 3rem;
    /* Add z-index here */
  }
  .box-blue {
    background-color: blue;
    top: 4rem;
    left: 0;
    /* Add z-index here */
  }

Need a hint?

Use z-index with higher numbers on the box you want on top. For example, red gets z-index: 3, green z-index: 2, and blue z-index: 1.

4

Add accessibility and responsive improvements

Add a role="main" attribute to the <main> element for accessibility. Also add a CSS media query to reduce the size of the boxes to 6rem by 6rem on screens narrower than 400px for better mobile viewing.

CSS

  
  
  



  main {
    position: relative;
    width: 20rem;
    height: 12rem;
  }
  .box-red, .box-green, .box-blue {
    width: 8rem;
    height: 8rem;
    position: absolute;
  }
  .box-red {
    background-color: red;
    top: 0;
    left: 6rem;
    z-index: 3;
  }
  .box-green {
    background-color: green;
    top: 2rem;
    left: 3rem;
    z-index: 2;
  }
  .box-blue {
    background-color: blue;
    top: 4rem;
    left: 0;
    z-index: 1;
  }
  /* Add media query below */

Need a hint?

Add role="main" inside the <main> tag. Then add a media query @media (max-width: 400px) that sets the boxes' width and height to 6rem.