Optional Positioning Exercise (Oct 5)
This exercise is optional. No grades are assigned for completing this task, 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 coding task you will be working with an existing set of HTML/CSS files. Please download the starter files. When you open up the
index.html file, you will note that there are already number of numbered blocks for you to position accordingly. Please add classes and styling to the existing structure as necessary to position the blocks as requested in the instructions below:
To start this week's exercise, please start a local repository in an empty folder, and then follow the steps below:
absolutepositioning in addition to the
z-indexproperty (for layering), please position box #1 behind box #2.
- Using a combination of
absolutepositioning on box #2 and #3, please position box #3 in the bottom-right corner of box #2.
fixedpositioning, please position box #4 in the bottom-right corner of the browser window.
- 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
- Using the
z-indexproperty, ensure that all boxes are layered overtop of box #4.
Once done the requested styling, please:
- Add comments through-out the code to indicate what resources you drew upon to complete the exercise.
- Validate the page using the CSS Validator (W3C) to find any errors or potential problems in your markup.
- Please upload your file to your SFU filespace and submit the URL to the Canvas assignment.
Your submission is due before the end of your lab time.
- Guide to CSS Viewport Units: vw, vh, vmin, vmax (Hongkiat): An overview of how viewport units work.
- Learn CSS Positioning in Ten Steps: A good overview of different positioning options in CSS and how to make use of them.
- Uniquely Positioning Elements (Shay Howe): A detailed breakdown of different positioning properties and their application.
- z-index (CSS Tricks): An explanation of how z-index (the CSS layer property) works.
- CSS Sundae - Learn CSS Positioning: An interactive tutorial on how to position elements using CSS.
Please remember the rules for this exercse:
- 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;
- Cite any knowledge that is not yours in a comment in the code. The internet is a glorious repository of information and you are welcome to draw on it, but you must let us know when something does not originate from your own knowledge.
- If work has been copied without citation the entire exercise portion of the final grade is forfeit (it totals to 5% of the final grade). A simple solution to this potential problem is to just note where your knowledge is coming from.