Using the position property

Be sure that you read the position property lecture notes, view the linked-in learning video assignments and the Canvas video tutorials before you begin this exercise.

This exercise contains the following pages

  1. position: relative
  2. position: absolute
  3. position: fixed

1: position: relative

Experiment with position: relative. Position the following elements:

  • strong tag: put in the background color orange, and relocate the top edge 12px
  • code tag: put in the background color light pink, and relocate the left edge -10px and the bottom edge 2px
  • h1 tag: put in the background-color goldenrod, and relocate the right edge 20px

2: position: absolute

Experiment with position: absolute. Position the following elements:

  • Red div tag: Set the dimensions of the red box to 120px height and width. Relocate the element with the top edge at 0 and left edge at 0 of the wrapper (you'll need to reset the context box - see video tutorial). Use padding to offset the contents of the banner so the red box doesn't overlap them. (see video tutorial)
  • Green div tag: Set the dimensions of the green box to 120px height and 200px width. Relocate the element with the top edge at 0px and right edge at 0 of the wrapper (context box is already reset once you do red)
  • Blue div tag: Set the dimensions of the blue box to 500px height and width. Relocate the element with the bottom edge at 0 of the wrapper (context box is already reset once you do red). Do not reset the left or right edge. Don't worry if things overlap.

2: position: fixed

Experiment with position: fixed. Position the following element:

  • sticky div tag: Set the dimensions of the pink sticky box to 120px height and width. Relocate the element with the top edge at 0 and left edge at 0 of its context box. Feel free to experiment with positioning different edges so you get a feel for how this works.