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;.