Absolute & Relative Positioning

Read and Understand

Read and understand the code on the following page before attempting this activity: https://www.understandingcode.com/absolute-positioning-example/

Activity

Here you can test out what you read, and achieve badges.

Activity Instructions



Match the image using by using a combination of relative and absolute positioning:

  • Don't delete any of the HTML or CSS
  • Use absolute positioning for each of the corner boxes
  • Don't use any values over 50px (margins, padding, offsets, etc)

HTML

CSS

JavaScript

Output