Position relative in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to make the box position relative.

CSS

div {
  position: [1];
  width: 100px;
  height: 100px;
  background-color: lightblue;
}

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

Astatic

Babsolute

Cfixed

Drelative

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'absolute' instead of 'relative' changes the positioning context.

Using 'static' means no positioning is applied.

The position property set to relative allows the element to be positioned relative to its normal position.

2fill in blank

medium

Complete the code to move the box 20px down from its normal position.

CSS

div {
  position: relative;
  top: [1];
  width: 100px;
  height: 100px;
  background-color: coral;
}

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

A0

B-20px

C20px

Dauto

Attempts:

3 left

💡 Hint

Common Mistakes

Using negative values moves the element up, not down.

Using 'auto' does not move the element.

The top property moves the element down when positive and up when negative, relative to its normal position.

3fill in blank

hard

Fix the error in the code to correctly position the box relative and move it 15px left.

CSS

div {
  position: [1];
  left: -15px;
  width: 80px;
  height: 80px;
  background-color: lightgreen;
}

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

Arelative

Babsolute

Cfixed

Dstatic

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'static' means offset properties like left do not work.

Using 'fixed' changes the element's position relative to the viewport.

To move an element with left, its position must be relative, absolute, or fixed. Here, relative is correct.

4fill in blank

hard

Fill both blanks to create a relative positioned box moved 10px right and 5px up.

CSS

div {
  position: [1];
  left: [2];
  top: -5px;
  width: 90px;
  height: 90px;
  background-color: peachpuff;
}

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

Arelative

Babsolute

C10px

D5px

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'absolute' changes the positioning context.

Using positive top moves the box down, not up.

Setting position to relative allows moving the box. The left property with 10px moves it right. Negative top moves it up.

5fill in blank

hard

Fill all three blanks to create a relative box moved 25px down, 15px left, with a blue border.

CSS

div {
  position: [1];
  top: [2];
  left: [3];
  width: 120px;
  height: 120px;
  border: 2px solid blue;
  background-color: lavender;
}

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

Aabsolute

Brelative

C-15px

D25px

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'absolute' changes the positioning context.

Mixing up positive and negative values for top and left.

Use relative position to move the box. top: 25px moves it down, left: -15px moves it left.