Z-index basics in CSS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the CSS property z-index control?

The z-index property controls the vertical stacking order of elements that overlap on a webpage. Higher values appear on top of lower values.

beginner

Which elements can have a z-index value applied?

Only elements with a position value other than static (like relative, absolute, fixed, or sticky) can have a z-index value applied.

intermediate

What happens if two overlapping elements have the same z-index value?

If two elements have the same z-index, the one that appears later in the HTML code will be displayed on top.

intermediate

Can z-index have negative values? What does it mean?

Yes, z-index can be negative. Negative values place the element behind elements with zero or positive z-index values.

advanced

What is a stacking context in relation to z-index?

A stacking context is a group of elements that have their own local stacking order. Elements inside a stacking context are stacked relative to each other, but the entire group stacks as one unit in the parent context.

Which CSS property must be set for z-index to work on an element?

A position

B display

C margin

D color

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

What does a higher z-index value mean?

A The element is smaller

B The element is further back

C The element is invisible

D The element is on top

A higher z-index means the element appears on top of elements with lower values.

If two elements overlap and have the same z-index, which one appears on top?

A The one with the higher <code>z-index</code>

B The one that appears first in the HTML

C The one that appears last in the HTML

D The one with the bigger size

The element that appears later in the HTML code is stacked on top if z-index values are equal.

Can z-index have negative values?

A No, only positive values are allowed

B Yes, negative values place elements behind others

C Yes, but negative values make elements invisible

D No, negative values cause errors

Negative z-index values place elements behind those with zero or positive values.

What is a stacking context?

A A group of elements stacked together with their own order

B A CSS property for colors

C A type of HTML tag

D A JavaScript function

A stacking context is a group of elements that stack together with their own local order, separate from the rest of the page.

Explain how z-index affects overlapping elements and what conditions must be met for it to work.

Think about how layers of paper stack and what makes one paper appear on top.

Describe what a stacking context is and why it matters when using z-index.

Imagine groups of stacked cards inside boxes stacked on a table.

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