Bird
Raised Fist0
CSSmarkup~5 mins

Common layering issues in CSS

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
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>
OutputSuccess
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/5)
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