Position static in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the position of the element to static.

CSS

div {
  position: [1];
}

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

Astatic

Brelative

Cabsolute

Dfixed

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'relative' or 'absolute' instead of 'static'.

Forgetting that 'static' is the default and must be typed exactly.

The position property set to static means the element follows the normal flow of the page.

2fill in blank

medium

Complete the code to reset the position of the element to static, overriding any other position.

CSS

.box {
  position: [1];
}

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

Astatic

Bsticky

Cfixed

Drelative

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'relative' or 'fixed' which allow offsets.

Confusing 'sticky' with 'static'.

Setting position: static; resets the element to normal flow, ignoring offsets.

3fill in blank

hard

Fix the error in the CSS to make the element use static positioning.

CSS

#header {
  position: [1];
}

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

Astatc

Brelativ

Cabsolut

Dstatic

Attempts:

3 left

💡 Hint

Common Mistakes

Typos like 'statc' or 'relativ'.

Using invalid position values.

The correct spelling is static. Misspelled values cause the browser to ignore the rule.

4fill in blank

hard

Fill both blanks to create a CSS rule that sets position to static and adds a background color.

CSS

.container {
  position: [1];
  background-color: [2];
}

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

Astatic

Brelative

Clightblue

Dred

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'relative' instead of 'static' for position.

Choosing a color that is too bright or not a valid CSS color.

Setting position: static; keeps normal flow. Adding background-color: lightblue; colors the container softly.

5fill in blank

hard

Fill all three blanks to create a CSS rule that sets position to static, width to 100%, and text alignment to center.

CSS

.header {
  position: [1];
  width: [2];
  text-align: [3];
}

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

Arelative

B100%

Ccenter

Dstatic

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'relative' for position instead of 'static'.

Setting width to a fixed pixel value instead of 100%.

Using 'left' or 'right' instead of 'center' for text alignment.

position: static; keeps normal flow. width: 100%; makes the element full width. text-align: center; centers the text inside.