Fixed Positioning4:34 with Guil Hernandez
Fixed positioning is a form of absolute positioning that positions elements in relation to the browser window instead of its containing element. In this video, you'll learn how to add a fixed navigation to your website.
- Unlike absolute positioning, an element with fixed positioning stays fixed to one spot on the page, regardless of the size of the browser window.
- Fixed headers and navigation bars are common in web design. For example, the navigation bar on Twitter.
- Fixed positioning is always relative to the browser's viewport. Like absolute positioning, you determine the fixed spot using offset values.
- When you use relative, absolute or fixed positioning on elements, you may end up with several elements occupying the same space. This can make elements overlap or completely cover up other elements from view.
Another common CSS positioning value is fixed. 0:00 Fixed positioning is a form of absolute positioning that positions elements 0:04 in relation to the browser window instead of its containing element, but 0:09 unlike absolute positioning an element with fixed positioning stays 0:14 fixed to one spot on the page. 0:19 Regardless of the size of the browser window or 0:21 if the user scrolls up and down of the page. 0:24 Fixed headers and navigation bars are common in the web design. 0:27 If a user has to scroll down a long page of content, they don't have to scroll all 0:32 the way back to the top of the page to navigate to the other parts of your site. 0:38 The user never loses sight of the navigation, 0:43 because it stays at the top of the page. 0:45 A popular example of fixed positioning is the navigation bar on Twitter. 0:53 As you can see, the navigation bar always stays fixed to the top of 0:59 the viewport no matter how far you scroll on the page. 1:03 So in this video, 1:10 I'll show you how to add a fixed navigation to your website like this. 1:11 To follow along, simply launch the workspace on this page. 1:16 Back in my wokspace, I'm going to position the main-header element, 1:19 so that it's fixed to the top of the page on large screens. 1:24 I'll go over to style dot CSS and inside the first media query, 1:28 I'm going to target the class main header, 1:34 then I'll add a position property and set the value to fixed. 1:38 I'm also going to give the header a background color of white and 1:44 a light box shadow to make it stand out from the other content below. 1:49 I'll save my style sheet and preview the workspace. 2:08 And now you can see that the value fixed takes the header out of the normal 2:12 document flow, so its width no longer stretches from edge to edge of 2:17 the browser window and the header only takes up as much space as content. 2:22 So to stretch the fixed header, the full width of the browser, 2:27 I go back to the main header rule and set its width to 100%. 2:33 Fixed positioning is always relative to the browser's viewport. 2:40 Like absolute positioning, you determine the fixed spot using offset values. 2:44 So to make sure the header always stays put at the top of the page, 2:49 I'll give it a top offset of zero. 2:55 This essentially anchors the header to the top of the browser. 2:58 So when I scroll the page, notice how the header remains fixed in one spot. 3:02 Neat. 3:10 Fixed positioning, like absolute positioning, 3:11 does not affect the position of other elements on the page. 3:14 So notice how the header covers up the top part of the page. 3:18 To adjust this, I'll apply a top padding to the body element. 3:23 So when I inspect the header with the Chrome dev tools, 3:28 I can see that the header is 68 pixels tall. 3:32 So back in my style sheet, inside the media query, 3:36 I'll target the body element and give it a top padding of 68 pixels. 3:41 And as you can see, the top padding value compensates for 3:52 the space that was covered by the header. 3:55 This looks great, but there's one layout problem that I've overlooked. 4:01 When the figure element, containing the image, caption and 4:05 icon, scroll to the top of the page. 4:09 Notice how it overlaps the fixed header. 4:12 This seems strange, doesn't it? 4:19 Now this isn't a bug, it's just the way position elements behave when they share 4:21 the same space on the page. 4:25 So coming up in the next video, 4:27 I'll show you how to fix this using the z-index property. 4:29
You need to sign up for Treehouse in order to download course files.Sign up