Today’s Goals:

• Continue with CSS layout properties
  Position property
  Z-index property (only used with position property if content overlaps)

 Today’s featured app:

• https://zenia.app/ – “Zenia’s core technology is based on algorithms of computer vision and neural networks. Through the front camera, the app recognizes movements of 16 major joints and within seconds gives feedback.” – Zenia founder Aleksei Kurov.

 Important Vocabulary

• Static, relative, absolute, fixed, and sticky– CSS position property values
• Z-index– CSS property that controls stacking order of elements
• Parent element, child element, and element ancestor– everything on your webpage is a child or parent element of other content. For example, a paragraph is a child element of your body element. The body element is the parent element in this example and is an ancestor of the paragraph element.

 CSS Position and Z-index Properties

• CSS positioning properties are just one of several ways to organize and lay out content on your webpage. Let’s review the five types of positions- static, absolute, relative, fixed, and sticky.
• 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.
• z-index can take negative values- do you think that would make something more likely to be on top of or below other content?
• Let’s name parent elements, children elements, and ancestors on our practice webpage
• References: https://www.w3schools.com/css/css_positioning.asp  and https://developer.mozilla.org/en-US/docs/Web/CSS/position 

 Winter Scenes Webpage

Your end result will look like this (click to view larger):

1. Download this code  to get started

2. Open a new Notepad++ page, copy and paste code, and save as position_practice.html

3. Read the comments, look for the ???? to fill in the blanks!

4. You will practice using the position and z-index properties as well as using the CSS selectors ID and class