Today’s goals:
- Continue practicing the CSS position and z-index properties
- Finish your winter scenes webpage
Today’s featured website:
- https://isitchristmas.com/ (check this on any day and on December 25 to see if it changes)
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
- Practice exercises: Do these 5 exercises to practice using the position and z-index properties
Winter Scenes Webpage
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 ????
When you finish fixing the code:
- Add position: relative; to your #wrapper. Save Notepad++ and then refresh (or relaunch) your webpage. What happened? Here’s why.
- Now move the penguin picture over to the right a little more so you can see more of the mug picture.
- Read about what’s next: CSS floats