When something is fixed on the page, it won’t move. Maybe you’ve scrolled down a page only to see that an ad on the side stays there. It’s fixed in position. You may want to have a header or menu always be at the top of the screen, even when the user scrolls down.

To accomplish that you can use z-index to bring the header to the front and fix the header in place to keep it from scrolling away as you scroll down the page, you use position: fixed.

<header>

position: fixed;

z-index: 1;

</header>

Then when you scroll, what comes after will appear to scroll under the header on the page.

Fixed position puts the element relative to where it is on the browser, as opposed to where it is relative to the other elements on the page, which is the default.

You can create a sidebar menu fixed in place using position fixed and giving it the position of top: 0 and left: (or right) 0. You would do the same thing as above with fixing its position and moving it to the front.

You can watch this lesson.