Stacking context in CSS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a stacking context in CSS?

A stacking context is like a special group in CSS where elements are stacked in order. Elements inside this group stack above or below each other without mixing with elements outside the group.

beginner

Name one CSS property that creates a new stacking context.

The position property with values relative, absolute, or fixed combined with a z-index value other than auto creates a new stacking context.

beginner

How does the z-index property relate to stacking contexts?

z-index controls the order of elements inside a stacking context. Higher z-index means the element appears on top within that context.

intermediate

True or False: Elements from different stacking contexts can overlap based on their z-index values alone.

False. Elements in different stacking contexts stack independently. Their z-index values only affect order inside their own context, not across contexts.

intermediate

What happens visually when a new stacking context is created?

Visually, the new stacking context acts like a separate layer. Elements inside it stack among themselves, but the whole group stacks as one unit with other elements outside.

Which CSS property combination creates a new stacking context?

A color: red;

B font-size: 16px;

C margin: 10px;

D position: relative; z-index: 1;

Only 'position: relative' with a 'z-index' value other than 'auto' creates a new stacking context.

Inside a stacking context, which element appears on top?

A Element with the lowest z-index

B Element with the highest z-index

C Element that appears first in HTML

D Element with the largest size

Within a stacking context, elements with higher z-index values appear on top.

True or False: z-index values affect stacking order across different stacking contexts.

A False

B True

C Only if z-index is greater than 10

D Only for fixed position elements

z-index only controls stacking order inside the same stacking context, not across different ones.

Which of these CSS properties does NOT create a stacking context by itself?

A background-color

B transform with any value

C position: fixed

D opacity less than 1

Background color alone does not create a stacking context.

What is the visual effect of stacking contexts on overlapping elements?

A Stacking contexts have no effect on overlap

B Elements from different contexts mix freely based on z-index

C Each stacking context stacks its elements independently

D Elements with lower opacity always appear on top

Each stacking context stacks its elements independently, acting like separate layers.

Explain what a stacking context is and why it matters in CSS layout.

Think about how layers stack in real life, like papers on a desk.

List common CSS properties or conditions that create a new stacking context.

Remember properties that change how browsers group elements visually.