Position absolute in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to make the box positioned absolutely.

CSS

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

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

Aabsolute

Brelative

Cfixed

Dstatic

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'relative' instead of 'absolute' which keeps the element in normal flow.

Using 'static' which is the default and does not position absolutely.

The position property set to absolute makes the element positioned absolutely relative to its nearest positioned ancestor.

2fill in blank

medium

Complete the code to move the absolutely positioned box 20px from the top.

CSS

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

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

Aleft

Bright

Ctop

Dbottom

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'left' or 'right' which moves the box horizontally instead of vertically.

Using 'bottom' which moves the box from the bottom edge.

The top property moves the absolutely positioned element 20px down from the top edge of its positioned ancestor.

3fill in blank

hard

Fix the error in the code to make the child box positioned absolutely inside the parent.

CSS

.parent {
  position: [1];
  width: 200px;
  height: 200px;
  background-color: lightgray;
}
.child {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 50px;
  height: 50px;
  background-color: green;
}

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

Astatic

Brelative

Cfixed

Dabsolute

Attempts:

3 left

💡 Hint

Common Mistakes

Leaving the parent with default 'static' position so child positions relative to viewport.

Using 'fixed' or 'absolute' on parent which changes layout unexpectedly.

The parent must have a position other than static (default) for the absolutely positioned child to be positioned relative to it. relative is commonly used.

4fill in blank

hard

Fill both blanks to create an absolutely positioned box 30px from the right and 40px from the bottom.

CSS

div {
  position: absolute;
  [1]: 30px;
  [2]: 40px;
  width: 100px;
  height: 100px;
  background-color: purple;
}

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

Aright

Btop

Cbottom

Dleft

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'left' instead of 'right' which positions from the left edge.

Using 'top' instead of 'bottom' which positions from the top edge.

The right and bottom properties position the box 30px from the right edge and 40px from the bottom edge of its positioned ancestor.

5fill in blank

hard

Fill all three blanks to create a dictionary in Python that maps CSS properties to their values for an absolutely positioned box 10px from top, 15px from left, and 100px wide.

CSS

css_styles = {
  '[1]': 'absolute',
  '[2]': '10px',
  '[3]': '15px'
}
width = '100px'

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

Aposition

Btop

Cleft

Dheight

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'height' instead of 'left' for horizontal offset.

Confusing 'top' and 'left' keys.

The dictionary keys are CSS properties: position, top, and left. The values set the box to absolute position and offsets from top and left.