Stacking context in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a stacking context by setting the position property.

CSS

div {
  position: [1];
  z-index: 10;
}

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

Arelative

Bstatic

Cinherit

Dunset

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'static' which does not create stacking context with z-index.

Using 'inherit' or 'unset' which do not create stacking context.

Setting position: relative; creates a stacking context when combined with z-index.

2fill in blank

medium

Complete the code to create a stacking context using CSS opacity.

CSS

.box {
  opacity: [1];
}

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

A0.5

B1

C0

Dinherit

Attempts:

3 left

💡 Hint

Common Mistakes

Using opacity 1 which does not create stacking context.

Using opacity 0 which makes element invisible.

Setting opacity less than 1 creates a new stacking context.

3fill in blank

hard

Fix the error in the code to create a stacking context with transform.

CSS

.container {
  transform: [1];
  z-index: 5;
}

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

Anone

Bscale(1)

Crotate(0deg)

DtranslateX(0)

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'none' which does not create stacking context.

Using 'rotate(0deg)' which may not always create stacking context in some browsers.

Using transform: translateX(0); creates a stacking context even if the element does not visibly move.

4fill in blank

hard

Fill both blanks to create a stacking context with a flex container and z-index.

CSS

.flex-container {
  display: [1];
  position: relative;
  z-index: [2];
}

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

Aflex

Bblock

C10

D0

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'block' display, which does not create a flex container.

Using z-index 0 which creates a stacking context but at the default stacking level.

Setting display: flex; and a positive z-index creates a stacking context.

5fill in blank

hard

Fill all three blanks to create a stacking context with position, opacity, and z-index.

CSS

.overlay {
  position: [1];
  opacity: [2];
  z-index: [3];
}

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

Aabsolute

B0.8

C100

Dfixed

Attempts:

3 left

💡 Hint

Common Mistakes

Using position 'absolute' which creates stacking context but less strong than fixed in some cases.

Using opacity 1 which does not create stacking context.

Using low z-index values that do not affect stacking order.

Using position: fixed;, opacity less than 1, and a high z-index creates a strong stacking context.