Stacking context in CSS - Mini Project: Build & Apply

Understanding CSS Stacking Context

📖 Scenario: You are creating a simple webpage with two overlapping colored boxes. You want to control which box appears on top using CSS stacking context rules.

🎯 Goal: Build a webpage with two overlapping <div> elements. Use CSS properties to create stacking contexts and control which box appears on top.

📋 What You'll Learn

Create two <div> elements with distinct background colors and sizes.

Position the boxes so they overlap partially.

Use CSS properties to create stacking contexts on the boxes.

Control the stacking order so the red box appears above the blue box.

💡 Why This Matters

🌍 Real World

Web developers often need to control how elements overlap on a page, such as menus, modals, or images. Understanding stacking context helps avoid visual bugs.

💼 Career

Knowing stacking context is essential for front-end developers to create visually correct and accessible user interfaces.

1

Create two overlapping boxes in HTML and CSS

Create two <div> elements with id attributes blue-box and red-box. Style them with CSS so that #blue-box has a blue background, width and height of 10rem, and is positioned relative at top: 2rem and left: 2rem. Style #red-box with a red background, width and height of 10rem, and position it relative at top: 0 and left: 5rem. This will make the boxes overlap partially.

CSS

Stacking Context Example

  /* Style #blue-box and #red-box with background colors, sizes, and relative positions */
  



  
  

Need a hint?

Use position: relative; and top, left properties to move the boxes so they overlap.

2

Add z-index to create stacking context on the blue box

Add a CSS property z-index: 1; to the #blue-box style. This will create a stacking context for the blue box and set its stacking order.

CSS

Stacking Context Example

  #blue-box {
    /* Add z-index: 1 here */
  }



  
  

Need a hint?

Adding z-index to a positioned element creates a stacking context.

3

Add z-index to the red box to appear on top

Add a CSS property z-index: 2; to the #red-box style. This will create a stacking context for the red box and make it appear above the blue box.

CSS

Stacking Context Example

  #red-box {
    /* Add z-index: 2 here */
  }



  
  

Need a hint?

Use a higher z-index value on the red box to make it appear on top.

4

Add an aria-label for accessibility and finalize

Add an aria-label="Blue colored box" attribute to the <div> with id="blue-box" and an aria-label="Red colored box" attribute to the <div> with id="red-box". This improves accessibility by describing the boxes to screen readers.

CSS

Stacking Context Example

  /* CSS remains unchanged */



  
  

Need a hint?

Use aria-label attributes on the <div> elements to describe them for screen readers.