Common layering issues in CSS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the CSS z-index property control?

The z-index property controls the stack order of elements along the z-axis (front to back). Higher values appear on top of lower values.

intermediate

What is a stacking context in CSS?

A stacking context is a group of elements that share the same stacking order rules. It acts like a mini-layer system inside the page, isolating elements from others outside it.

intermediate

Why might an element with a higher z-index appear behind another element?

Because it might be inside a different stacking context with a lower parent z-index, or the element's position property is not set to create stacking context properly.

beginner

How does the CSS position property affect layering?

Only elements with position set to relative, absolute, fixed, or sticky can have a z-index that affects layering.

beginner

What common mistake causes layering issues with dropdown menus or modals?

Not setting position and z-index properly on dropdowns or modals, or having parent containers with overflow: hidden that clip the element.

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

A padding

B position

C margin

D display

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

What is a stacking context?

A A group of elements with shared layering rules

B A CSS property for colors

C A type of HTML tag

D A JavaScript function

A stacking context is a set of elements that follow the same layering rules, isolating their z-index from elements outside.

Why might a dropdown menu be hidden behind other content?

A The menu has no text

B The menu uses <code>display: block</code>

C Parent container has <code>overflow: hidden</code>

D The page has no CSS

When a parent container has overflow: hidden, it can clip child elements like dropdowns, hiding them behind other content.

Which z-index value appears on top?

A -1

B 5

C 0

D 10

Higher z-index values appear on top of lower ones.

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

A The one later in the HTML code

B The one earlier in the HTML code

C The one with smaller font size

D The one with more padding

When z-index is equal, the element that comes later in the HTML code appears on top.

Explain what causes layering issues in CSS and how stacking contexts affect element visibility.

Think about how elements are grouped and ordered in layers.

Describe how to fix a dropdown menu that appears behind other page content.

Consider both the dropdown and its container styles.