Common layering issues in CSS

Introduction

Layering helps decide which parts of a webpage appear on top of others. Sometimes layers don't show as expected, causing confusion or hiding content.

When a button is hidden behind an image and can't be clicked.

When a dropdown menu disappears behind other page elements.

When overlapping text is hard to read because layers are mixed up.

When you want to create a popup that appears above everything else.

When animations or effects don't show properly because of layer order.

Syntax

CSS

selector {
  position: relative | absolute | fixed | sticky;
  z-index: number;
}

position must be set to something other than static for z-index to work.

z-index uses numbers; higher numbers appear on top.

Examples

This element will be above elements with lower or no z-index.

CSS

div {
  position: relative;
  z-index: 1;
}

This image will appear on top of elements with lower z-index.

CSS

img {
  position: absolute;
  z-index: 10;
}

This z-index will not work because position is static by default.

CSS

button {
  position: static;
  z-index: 5;
}

Sample Program

Three colored boxes overlap. Box 2 has the highest z-index so it appears on top. Box 1 is in the middle. Box 3 has the lowest z-index and appears behind the others.

CSS

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Layering Example</title>
  <style>
    .box1 {
      position: relative;
      width: 150px;
      height: 150px;
      background-color: lightblue;
      z-index: 1;
      margin: 20px;
    }
    .box2 {
      position: relative;
      width: 150px;
      height: 150px;
      background-color: coral;
      margin: -100px 0 0 100px;
      z-index: 2;
    }
    .box3 {
      position: relative;
      width: 150px;
      height: 150px;
      background-color: lightgreen;
      margin: -100px 0 0 50px;
      z-index: 0;
    }
  </style>
</head>
<body>
  <div class="box1">Box 1 (z-index: 1)</div>
  <div class="box2">Box 2 (z-index: 2)</div>
  <div class="box3">Box 3 (z-index: 0)</div>
</body>
</html>

Important Notes

Always set position to relative, absolute, fixed, or sticky for z-index to work.

Elements with the same z-index follow the order they appear in the HTML (later elements appear on top).

Parent elements' stacking context can affect child elements' layering.

Summary

Use position and z-index to control which elements appear on top.

Higher z-index means the element is closer to the front.

Without proper position, z-index won't work.

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