Z-index basics in CSS - Mini Project: Build & Apply

Z-index basics

📖 Scenario: You are creating a simple webpage with two overlapping colored boxes. You want to control which box appears on top using the z-index property.

🎯 Goal: Build a CSS snippet that sets up two overlapping boxes and uses z-index to control their stacking order so that the red box appears above the blue box.

📋 What You'll Learn

Create two boxes with class names .box1 and .box2

Set the position property to relative for both boxes

Set the background colors: .box1 to blue and .box2 to red

Use z-index to make sure the red box (.box2) appears above the blue box (.box1)

Set the size of each box to 100px by 100px and position them so they overlap

💡 Why This Matters

🌍 Real World

Web designers often need to control which elements appear on top when they overlap, such as menus, modals, or images.

💼 Career

Understanding z-index is essential for front-end developers and UI designers to create visually correct and user-friendly web pages.

1

Create two boxes with basic styles

Create CSS rules for .box1 and .box2 that set their width and height to 100px and background colors to blue for .box1 and red for .box2.

CSS

/* Your code here to create .box1 and .box2 with size and background colors */

Need a hint?

Use width, height, and background-color properties for each class.

2

Add positioning to the boxes

Add position: relative; to both .box1 and .box2 CSS rules to enable stacking control.

CSS

.box1 {
  width: 100px;
  height: 100px;
  background-color: blue;
  /* Add position relative here */
}

.box2 {
  width: 100px;
  height: 100px;
  background-color: red;
  /* Add position relative here */
}

Need a hint?

Set position: relative; inside both class rules.

3

Position the boxes to overlap

Add top: 20px; and left: 20px; to .box2 so it overlaps .box1 which stays at the default position.

CSS

.box1 {
  width: 100px;
  height: 100px;
  background-color: blue;
  position: relative;
}

.box2 {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  /* Add top and left to overlap .box1 */
}

Need a hint?

Use top and left properties to move the red box.

4

Use z-index to bring red box on top

Add z-index: 1; to .box2 to make sure the red box appears above the blue box.

CSS

.box1 {
  width: 100px;
  height: 100px;
  background-color: blue;
  position: relative;
}

.box2 {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  top: 20px;
  left: 20px;
  /* Add z-index to bring .box2 on top */
}

Need a hint?

Set z-index: 1; inside the .box2 rule.