Z-index basics in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the stacking order of an element with z-index.

CSS

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

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

A10

Bauto

C-1

Dnone

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'none' or 'auto' as a number value.

Not setting position property before z-index.

The z-index property accepts integer values to set stacking order. Here, 10 sets a positive stacking order.

2fill in blank

medium

Complete the code to make the element appear behind others using z-index.

CSS

header {
  position: absolute;
  z-index: [1];
}

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

Aauto

B-1

C100

D5

Attempts:

3 left

💡 Hint

Common Mistakes

Using positive numbers to try to send element behind.

Not setting position property.

Negative z-index values place the element behind others with higher or default stacking.

3fill in blank

hard

Fix the error in the code to correctly apply z-index.

CSS

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

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

A0

Bauto

C5

D10

Attempts:

3 left

💡 Hint

Common Mistakes

Setting z-index without position.

Using 'auto' thinking it sets stacking order.

For z-index to work, the element must have a position other than static. The code is missing position. Setting z-index alone has no effect without position.

4fill in blank

hard

Fill both blanks to create a stacking context and set z-index.

CSS

.modal {
  position: [1];
  z-index: [2];
}

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

Afixed

Brelative

C1000

Dauto

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'auto' for z-index.

Using position values that don't create stacking context.

Setting position: fixed; creates a stacking context. A high z-index like 1000 ensures the modal appears above other elements.

5fill in blank

hard

Fill all three blanks to correctly layer elements with z-index and position.

CSS

.header {
  position: [1];
  z-index: [2];
}
.footer {
  position: relative;
  z-index: [3];
}

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

Aabsolute

B10

C5

Dstatic

Attempts:

3 left

💡 Hint

Common Mistakes

Using static position which ignores z-index.

Setting lower z-index on element meant to be on top.

The header uses position: absolute; with a higher z-index: 10; to appear above the footer, which has z-index: 5; and position: relative;.

Practice

1. What does the CSS property z-index control?

easy

A. The stacking order of overlapping elements

B. The font size of text

C. The background color of elements

D. The margin space around elements

Solution

1. Step 1: Understand the purpose of z-index

   The z-index property is used to control which elements appear on top when they overlap.

2. Step 2: Compare with other CSS properties

   Font size, background color, and margin do not affect stacking order.

3. Final Answer:

   The stacking order of overlapping elements -> Option A

4. Quick Check:

   z-index controls stacking order [OK]

Hint: Remember: z-index = which element is on top [OK]

Common Mistakes:

• Confusing z-index with color or size properties
• Thinking z-index changes element size
• Assuming z-index works without positioning

2. Which of the following is the correct way to apply z-index to an element?

easy

A. position: relative; z-index: 10;

B. display: block; z-index: 10;

C. position: static; z-index: 10;

D. margin: 10px; z-index: 10;

Solution

1. Step 1: Check which positions allow z-index

   Only positioned elements (relative, absolute, fixed, sticky) respond to z-index.

2. Step 2: Identify correct syntax

   Position must not be static (default). So position: relative with z-index works.

3. Final Answer:

   position: relative; z-index: 10; -> Option A

4. Quick Check:

   z-index works only with positioned elements [OK]

Hint: z-index needs position other than static [OK]

Common Mistakes:

• Using z-index without setting position
• Assuming display affects stacking
• Using margin or padding with z-index expecting effect

3. Given the CSS below, which element will appear on top?

div.a { position: relative; z-index: 5; }
div.b { position: relative; z-index: 10; }

medium

A. div.a will be on top

B. div.b will be on top

C. Both will appear side by side

D. Neither will overlap

Solution

1. Step 1: Compare z-index values

   div.a has z-index 5, div.b has z-index 10. Higher z-index means on top.

2. Step 2: Confirm both are positioned

   Both have position: relative, so z-index applies.

3. Final Answer:

   div.b will be on top -> Option B

4. Quick Check:

   Higher z-index = top element [OK]

Hint: Higher z-index number means element is on top [OK]

Common Mistakes:

• Ignoring position property
• Thinking lower z-index is on top
• Assuming elements don't overlap

4. Why does the z-index property not work on this element?

.box { z-index: 100; }

medium

A. Because z-index requires a background color

B. Because z-index only works on inline elements

C. Because the element has no position set or is static

D. Because z-index only works on elements with margin

Solution

1. Step 1: Check element positioning

   By default, elements have position: static, which ignores z-index.

2. Step 2: Understand z-index requirements

   z-index only works if position is relative, absolute, fixed, or sticky.

3. Final Answer:

   Because the element has no position set or is static -> Option C

4. Quick Check:

   z-index needs non-static position [OK]

Hint: Set position to relative or absolute for z-index to work [OK]

Common Mistakes:

• Assuming z-index works without position
• Thinking z-index depends on background color
• Believing margin affects stacking order

5. You have three overlapping elements with these styles:

.one { position: relative; z-index: 1; }
.two { position: absolute; z-index: 3; }
.three { position: relative; z-index: 2; }

Which order will they stack from bottom to top?

hard

A. .one, .two, .three

B. .two, .three, .one

C. .three, .one, .two

D. .one, .three, .two

Solution

1. Step 1: List elements with their z-index

   .one = 1, .three = 2, .two = 3.

2. Step 2: Order by ascending z-index

   Lower z-index is below higher z-index, so stacking is .one (bottom), .three (middle), .two (top).

3. Final Answer:

   .one, .three, .two -> Option D

4. Quick Check:

   Stack order = ascending z-index [OK]

Hint: Stack from lowest to highest z-index [OK]

Common Mistakes:

• Ignoring absolute vs relative position effect
• Mixing up stacking order direction
• Assuming position type changes z-index order