From the course: CSS Layouts: From Float to Flexbox and Grid

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Position: Fixed, sticky, and static

Position: Fixed, sticky, and static - CSS Tutorial

From the course: CSS Layouts: From Float to Flexbox and Grid

Start my 1-month free trial

Position: Fixed, sticky, and static

“

- [Instructor] Continuing from the last exercise let's jump back in with fixed positioning. Go to the Nav selector block on line 14, and add in position fixed. We're going to create a Nav bar that's always displayed in the view port even on page scroll. But it looks like it just disappeared. It didn't. It's actually under the main element. Remember we talked about position in the zed index, right? Well we add a position relative to the main element and it comes after the nav in the HTML. So by default, it has a higher stack order. So the nav is just underneath the main content. We can just add a zed index value to the nav to make sure it stays on top. And often, when creating a fixed nav, it's good to give it a high number, because we want that to always be on top of all elements. So let's add that in. And the navigation bar is back. With position fixed and absolute, if the block element doesn't have a width applied…

Contents