Lessons 87 and 88 – Complete 2020 Web Development Bootcamp

Lesson 87 – CSS Z-index and Stacking Order

Each element on the screen has an “x” or “y” position which allows you to move the element up and down or to the left and right.

Each element also has a “z” position. The “z” position of an element determines whether it is closer to or further away from the front of the screen.

All html elements have a natural stacking order. The elements that come first in the html code will be closer to the back of the screen. As you go down the html code the elements come further and further to the front of the screen.

You can use the z-index to change the natural stacking order of the html code.

The default z-index is 0.

The z-index only works on elements that have positioning assigned to them.

Lesson 88 – CSS Media Queries

You can use the Google Mobile Friendly Test page to test whether or not your site is mobile friendly.

Google will penalize your web site in its rankings if it isn’t mobile friendly.

This is an example of a media query in CSS which is telling the browser to display the <h1> element as red in screen sizes with a screen size of 900 px or less. This means that the <h1> will only be displayed as red in devices the size of a tablet or smaller.

@media (max-width: 900px){

h1 {
    color: red;
}

}