Common layering issues in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the stacking order of the element.

CSS

.box {
  position: relative;
  z-index: [1];
}

Drag options to blanks, or click blank then click option'

A10

Bvisible

Cnone

Dauto

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'none' or 'visible' which are not valid z-index values.

Not setting position property before z-index.

The z-index property controls the stacking order of positioned elements. A higher number means the element appears on top.

2fill in blank

medium

Complete the code to make the element positioned so z-index works.

CSS

.overlay {
  [1]: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Drag options to blanks, or click blank then click option'

Aposition

Bdisplay

Cfloat

Dz-index

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'display' instead of 'position'.

Not setting any positioning property.

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

3fill in blank

hard

Fix the error in the code to ensure the red box appears above the blue box.

CSS

.red-box {
  position: relative;
  z-index: [1];
  background-color: red;
  width: 100px;
  height: 100px;
}
.blue-box {
  position: relative;
  z-index: 5;
  background-color: blue;
  width: 100px;
  height: 100px;
  margin-top: -50px;
}

Drag options to blanks, or click blank then click option'

A3

B5

Cauto

D10

Attempts:

3 left

💡 Hint

Common Mistakes

Using a lower or equal z-index value than the blue box.

Using 'auto' which defaults to 0.

The red box needs a higher z-index than the blue box (which is 5) to appear on top.

4fill in blank

hard

Fill both blanks to fix layering so the modal appears above the background and the button stays below the modal.

CSS

.background {
  position: relative;
  z-index: [1];
}
.modal {
  position: fixed;
  z-index: [2];
  background-color: white;
  width: 300px;
  height: 200px;
}

Drag options to blanks, or click blank then click option'

A1

B10

C5

D0

Attempts:

3 left

💡 Hint

Common Mistakes

Setting modal z-index lower than background.

Using the same z-index for both elements.

The background should have a lower z-index (like 1) and the modal a higher one (like 10) to appear on top.

5fill in blank

hard

Fill all three blanks to create a stacking context where the child is above the parent and sibling elements.

CSS

.parent {
  position: relative;
  z-index: [1];
}
.child {
  position: absolute;
  z-index: [2];
}
.sibling {
  position: relative;
  z-index: [3];
}

Drag options to blanks, or click blank then click option'

A1

B10

C5

D0

Attempts:

3 left

💡 Hint

Common Mistakes

Giving the parent a higher z-index than the child.

Setting sibling z-index higher than child.

The parent has z-index 1, the child has a higher z-index 10 to appear above, and the sibling has 0 which is below parent but child is above both.