Today’s Goals:

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

 Today’s featured website:

• https://www.hidelikeseverywhere.com/ -Today’s “site” is actually a browser extension that hides social media likes (Instagram is considering getting rid of likes!)

 New- Positioning and Z-Index

• Overview #1:
  CSS position property 
  z-index property 
• Overview #2:
  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. Continue working with page wrappers and the CSS selectors #ID and .class.
  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.
• Practice:
  1. Download this code  and copy and paste it into a new Notepad++ file. Save it as positioning.html.
  2. 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?
  3. Let’s move #left somewhere else in the HTML. What happens? Why?
  4. 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?
  5. 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!