Today’s goals:

• Learn about the CSS position property
• Learn about the z-index property

 Today’s featured website:

• https://gcemetery.co/– This online “cemetery” of Google products documents the demise of things you might or might not have ever heard about!

 CSS Positioning

• CSS positioning properties are just one of several ways to organize and lay out content on your webpage. We are going to learn about five types of positions- static, absolute, relative, fixed, and sticky.
• Objectives: Learn about the differences among absolute, fixed, static, and relative positioning by adding differently positioned sections to our webpage. Continue practicing how to set up, add, and nest div tags.
• Positioning content on a webpage: Content can overlap (z-index determines stacking order) and is either positioned from the top left corner of the webpage and goes exactly where you tell it to go (relative to its parent container and/or the document itself- absolute) or in relation to its usual position on the page (relative). Content can also have a fixed position, which means it doesn’t move as you scroll along the page and it stays in the same place.
  Top, right, left, and bottom values are used to tell the browser where the content should be positioned on the page. The values can either be in pixels or as a percentage, which are relative to the parent element’s dimensions (example, a webpage wrapper, a sidebar, a table, etc.). Static positioning is the default; it just means the content will appear however it’s added in the HTML. Finally, sticky toggles between fixed and relative, depending on scrolling.
• Download this code and copy and paste it into a new Notepad++ file. Save it as positioning.html.
• Let’s change the values of top, right, bottom, and left for #content. What happens? Why? Let’s move #content somewhere else in the HTML. What happens? Why?
• Let’s move #left somewhere else in the HTML. What happens? Why?
• Let’s make a new ID and call it #content2. Give it a width of 200px, a height of 150px, and a background-color of lightgray. Let’s add it to our HTML in a couple of different places. What happens? Why?
• Let’s change the z-index of our sticky header to auto to see what happens. Here is a good visual for the z-index property. Why did we need to give our header a high z-index value? Note: z-index only works on positioned elements!

 CSS Positioning Practice

You are going to make this:

Download the broken code, copy and paste it into Notepad++, and save as winter.html. Read the comments and fill in the correct code wherever you see ????