Common layering issues in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the stacking order of the element.

CSS

.box {
  position: relative;
  z-index: [1];
}

Drag options to blanks, or click blank then click option'

A10

Bvisible

Cnone

Dauto

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'none' or 'visible' which are not valid z-index values.

Not setting position property before z-index.

The z-index property controls the stacking order of positioned elements. A higher number means the element appears on top.

2fill in blank

medium

Complete the code to make the element positioned so z-index works.

CSS

.overlay {
  [1]: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Drag options to blanks, or click blank then click option'

Aposition

Bdisplay

Cfloat

Dz-index

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'display' instead of 'position'.

Not setting any positioning property.

The position property must be set to absolute, relative, or fixed for z-index to work.

3fill in blank

hard

Fix the error in the code to ensure the red box appears above the blue box.

CSS

.red-box {
  position: relative;
  z-index: [1];
  background-color: red;
  width: 100px;
  height: 100px;
}
.blue-box {
  position: relative;
  z-index: 5;
  background-color: blue;
  width: 100px;
  height: 100px;
  margin-top: -50px;
}

Drag options to blanks, or click blank then click option'

A3

B5

Cauto

D10

Attempts:

3 left

💡 Hint

Common Mistakes

Using a lower or equal z-index value than the blue box.

Using 'auto' which defaults to 0.

The red box needs a higher z-index than the blue box (which is 5) to appear on top.

4fill in blank

hard

Fill both blanks to fix layering so the modal appears above the background and the button stays below the modal.

CSS

.background {
  position: relative;
  z-index: [1];
}
.modal {
  position: fixed;
  z-index: [2];
  background-color: white;
  width: 300px;
  height: 200px;
}

Drag options to blanks, or click blank then click option'

A1

B10

C5

D0

Attempts:

3 left

💡 Hint

Common Mistakes

Setting modal z-index lower than background.

Using the same z-index for both elements.

The background should have a lower z-index (like 1) and the modal a higher one (like 10) to appear on top.

5fill in blank

hard

Fill all three blanks to create a stacking context where the child is above the parent and sibling elements.

CSS

.parent {
  position: relative;
  z-index: [1];
}
.child {
  position: absolute;
  z-index: [2];
}
.sibling {
  position: relative;
  z-index: [3];
}

Drag options to blanks, or click blank then click option'

A1

B10

C5

D0

Attempts:

3 left

💡 Hint

Common Mistakes

Giving the parent a higher z-index than the child.

Setting sibling z-index higher than child.

The parent has z-index 1, the child has a higher z-index 10 to appear above, and the sibling has 0 which is below parent but child is above both.

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