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

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 */

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 */
  }

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 */

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.

Practice

1. Which CSS property controls the stacking order of elements on a webpage?

easy

A. float

B. position

C. z-index

D. display

Solution

1. Step 1: Understand stacking order control

   The z-index property sets which element appears on top when elements overlap.

2. Step 2: Differentiate from other properties

   position sets how elements are positioned but does not control layering alone; display and float affect layout, not stacking order.

3. Final Answer:

   z-index -> Option C

4. Quick Check:

   Stack order = z-index [OK]

Hint: Remember: z-index controls front/back layering [OK]

Common Mistakes:

• Confusing position with z-index
• Thinking display controls layering
• Assuming float affects stacking

2. Which of the following is the correct way to make z-index work on an element?

easy

A. Set float: left;

B. Set position: static;

C. Set display: block;

D. Set position: relative; or absolute

Solution

1. Step 1: Identify position values that enable z-index

   Only elements with position set to relative, absolute, fixed, or sticky respond to z-index.

2. Step 2: Exclude static and other properties

   position: static is default and ignores z-index. display and float do not enable z-index.

3. Final Answer:

   Set position to relative or absolute -> Option D

4. Quick Check:

   z-index works only with positioned elements [OK]

Hint: Use relative or absolute position for z-index to work [OK]

Common Mistakes:

• Using position: static and expecting z-index to work
• Confusing display or float with position
• Not setting position at all

3. Given the CSS below, which element will appear on top?

div {
  position: relative;
}
#box1 {
  z-index: 5;
  background: red;
  width: 100px;
  height: 100px;
}
#box2 {
  position: absolute;
  z-index: 3;
  background: blue;
  width: 100px;
  height: 100px;
  top: 20px;
  left: 20px;
}

medium

A. The red box (#box1) appears on top

B. The blue box (#box2) appears on top

C. Both boxes appear side by side without overlap

D. Neither box appears because of missing position

Solution

1. Step 1: Check positions and z-index values

   #box1 has position: relative and z-index: 5. #box2 has position: absolute and z-index: 3.

2. Step 2: Compare z-index values

   Higher z-index means the element is closer to the front. 5 is greater than 3, so #box1 is on top.

3. Final Answer:

   The red box (#box1) appears on top -> Option A

4. Quick Check:

   Higher z-index = front [OK]

Hint: Higher z-index means element is on top [OK]

Common Mistakes:

• Assuming absolute position always appears on top
• Ignoring z-index values
• Thinking position type alone controls layering

4. Why does the z-index property not work on this element?

.popup {
  z-index: 10;
  background: yellow;
  width: 200px;
  height: 100px;
}

medium

A. Because z-index only works on elements with a position other than static

B. Because the background color is missing opacity

C. Because width and height are not set to 100%

D. Because z-index requires a parent with position relative

Solution

1. Step 1: Check element's position property

   The element has no position set, so it defaults to static.

2. Step 2: Understand z-index requirements

   z-index only works on elements with position set to relative, absolute, fixed, or sticky. Static elements ignore z-index.

3. Final Answer:

   z-index only works on positioned elements -> Option A

4. Quick Check:

   Position must be non-static for z-index [OK]

Hint: Set position to relative or absolute for z-index to work [OK]

Common Mistakes:

• Thinking background color affects z-index
• Believing width/height affect layering
• Assuming parent position is required

5. You have three overlapping elements with these styles:

#a { position: relative; z-index: 2; }
#b { position: absolute; z-index: 1; }
#c { position: relative; z-index: 3; }

How can you make #b appear on top without changing its z-index value?

hard

A. Change #b's position to relative and keep z-index 1

B. Wrap #b in a parent with higher z-index and position set

C. Set #a and #c to position: static

D. Increase #b's width and height

Solution

1. Step 1: Understand stacking context

   Elements create stacking contexts based on position and z-index. #b has z-index 1 but is inside its own stacking context.

2. Step 2: Use parent stacking context to raise #b

   Wrapping #b in a parent with a higher z-index and position creates a new stacking context that can appear above #a and #c without changing #b's z-index.

3. Final Answer:

   Wrap #b in a positioned parent with higher z-index -> Option B

4. Quick Check:

   Use parent stacking context to control layering [OK]

Hint: Use parent with higher z-index to raise child layering [OK]

Common Mistakes:

• Trying to change z-index of #b directly
• Changing position without stacking context
• Ignoring stacking contexts created by parents