Broken Winter Assignment

Posted on by tchastkavich

Shape of the Day:

Website of the Day:

https://httpster.net/2019/feb/ – Check out awesome websites made from around the world!

1. CSS Positioning and Z-index Property

  • Positioning, organizing, and changing the layout of the content on your webpage is important. Here are 5 types of positions you will learn – static, absolute, relative, fixed, and sticky.
Absolute - Overlapping content in the z-axis to tell content exactly where it goes relative to its parent container or the document itself
Relative - Overlapping content in the z-axis to tell content where it goes relative to its usual position on the page.
Fixed - Content doesn't move as you scroll along the page, it should stay in the same place
Static - Default position that means content will appear however it was added in your HTML tags.
Sticky - This toggles between fixed and relative, which means it's dependent on scrolling
  • Use the code here and paste it into a new Brackets File. Save the file as “positioning.html”
  • Change the values for top, right, bottom, left for #content. What happens? Why does it happen? Move the content tag somewhere else in the body tag – what happens? Why does it happen?
  • Move #left somewhere else in the HTML – What happens? Why?
  • Create a new ID and call it #content2. Provide a width of 200px, a height of 150px, and a background-color of lightgray. Add it to your HTML in a couple DIFFERENT places – what happens? Why?
  • Change the z-index of the sticky header to auto and see what changes. Check out this good visual for the z-index property. Why was a higher z-index value needed for the header? *** z-index only works on positioned elements**

2. Winter HTML – Broken Code

  • Download the broken code here – you want your background to look like the following image:
  • Ensure to read the comments and fill in the correct code when you see question marks ??????