Broken Winter Assignment – Mr. Chastkavich's Website

Shape of the Day:

https://www.google.com/maps/space/earth – Here’s a Google Maps of some Planets and Moons!

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 file in Visual Studio. 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**

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 ??????