ahandrewh teaches IAT-339web design & development

Positioning exercise (due June 17)


This exercise is optional. No grades are assigned for completing this exercise but comments are provided on submissions.

To practice working with positioning in CSS, this week's code task has you practicing placing and positioning elements in different ways to resolve a given layout problem.


For this exercise you will be starting with a pre-built set of HTML and CSS files. Please download the starter files.

When you open up the index.html file, you will see there are already numbered blocks pre-built for you. Please add classes and styling to the existing structure as necessary to position the blocks as requested below.

  1. Using absolute positioning in addition to the z-index property (for layering), please position box #1 behind box #2.
  2. Using a combination of relative and absolute positioning on box #2 and #3, please position box #3 in the bottom-right corner of box #2.
  3. Using fixed positioning, please position box #4 in the bottom-right corner of the browser window.
  4. Using the vh (viewport height) and vw (viewport width) units, set box #4 to span across 25% of the width, and 25% of the height of the viewport. This Hongkiat article helps to provide an overview of vw and vh units.
  5. Using the z-index property, ensure that all boxes are layered overtop of box #4.
  6. Submit the URL to the Canvas assignment.

Once done positioning the blocks

  1. Add comments through-out the code to indicate what resources you drew upon to complete the exercise.
  2. Validate the page using the CSS Validator (W3C) to find any errors or potential problems in your markup.
  3. Please upload your files to your SFU filespace and submit the URL to the Canvas assignment.

Your submission is due before lecture on June 17.

Exercise rules reminder

Please remember that the exercise rules still apply:

  1. You can use online resources, course materials, your TA, and lab-mates for support. This being said, others are not allowed to do your work for you. Also, if you are drawing from online resources, course materials, your TA or peers, you must;
  2. Cite any knowledge that is not yours in a comment in the code. The internet is a huge repository of information and you are welcome to use it, but you must let us know when something does not originate from your own knowledge.
  3. If work has been copied without citation the exercise grade will be zero. Please make sure to include comments indicating where you had assistance or learned.