Today’s goals:

• Review class computer policy and acceptable use policy
• Learn about the CSS position property
• Learn about the z-index property

 Today’s featured website:

• https://codepen.io/chaofix/pen/VrWZga– This simple game is created entirely from CSS

 Class Computer Policy and Acceptable Use Policy

• Your class-issued computer is for class work only. You are not allowed to download anything that isn’t related to class. This computer is not your personal device; it belongs to the school.
• Every student has signed the school district’s Acceptable Use policy for school-owned technology, including computers and the network. When you violate the class computer policy, you also violate the Acceptable Use policy, which at the bare minimum will result in a detention. You also lose points off of your class grade (in the Effort category) and could face more severe consequences if you actually damage the computer beyond repair.

 CSS Positioning

• 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 and is either positioned from the top left corner of the webpage (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?

 CSS Positioning Practice

You are going to make this:

Download the broken code, copy and paste it into Notepad++, and save as winter.html.