Z-index stacking control in Tailwind - 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. Higher values appear on top of lower values.

beginner

How do you apply a z-index value of 10 using Tailwind CSS?

Use the class z-10 to set z-index: 10; in Tailwind CSS.

intermediate

What must be true about an element for z-index to work?

The element must have a position other than static (like relative, absolute, fixed, or sticky) for z-index to take effect.

beginner

What Tailwind class sets an element's position to <code>relative</code>?

The class relative sets position: relative; in Tailwind CSS.

intermediate

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

The element that appears later in the HTML code (lower in the source order) will appear on top if z-index values are equal.

Which Tailwind class sets z-index: 20;?

A z-30

B z-10

C z-20

D z-5

The class z-20 sets z-index: 20; in Tailwind CSS.

What is required for z-index to work on an element?

A Element must have a position other than static

B Element must have a background color

C Element must be a block element

D Element must have a width set

z-index only works if the element's position is relative, absolute, fixed, or sticky, not static.

If two elements overlap and both have z-index: 10;, which one is on top?

A The one with position absolute

B The one that appears later in the HTML

C The one with a bigger width

D The one with a background color

When z-index values are equal, the element later in the HTML source appears on top.

Which Tailwind class sets position: relative;?

A relative

B pos-rel

C rel

D position-relative

The Tailwind class relative sets position: relative;.

What does a higher z-index value mean?

A Element has bigger size

B Element appears behind others

C Element is more transparent

D Element appears on top of others

Higher z-index values make elements appear on top of those with lower values.

Explain how z-index controls stacking order and what conditions must be met for it to work.

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

Describe how to use Tailwind CSS classes to control stacking order and positioning of elements.

Remember Tailwind uses short class names for common CSS properties.