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

Unlock the full course today

Join today to access over 24,900 courses taught by industry experts.

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 Buy for my team

Position: Fixed, sticky, and static

“

- [Speaker] 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 navbar that's always displayed in the viewport, 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 z-index, right? Well, we added 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 z-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 to it,…

Contents