Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
CSS: Page Layouts introduces basic layout concepts, gives advice on how to create properly structured HTML based on prototypes and mockups, and goes into critical page layout skills such as floats and positioning. Author James Williamson shows how to combine these techniques to create fixed, fluid, and responsive layouts. Designers are also shown how to enhance their pages through the creative use of CSS techniques like multi-column text, opacity, and the background property. Exercise files are included with this course.
Fixed positioning is part of the absolute positioning model, and it allows you to position element relative to the viewport. Unlike relative or absolute positioning, fixed positioning wasn't initially supported very well by browsers, which is why it's not quite as well known as absolute or relative positioning. However, the reason increase in support, especially among mobile devices, means that fixed positioning is beginning to see widespread use among designers. Now to demonstrate fixed positioning, I have the fixed.htm file open from the 04_03 directory, and if I scroll down, I can see that we are pretty much using the same file that we've been using for the past couple of exercises.
We have our three elements, elements 1, 2, and 3, and they are wrapped in our section, with the class attribute of container. Okay, so I am going to go up to element 1 here, and let's just go ahead and set position for that to fixed. Now since we understand the concept of offsets now, we will go ahead and apply some offsets to this. And I am going to do a top offset of 25 pixels and then a right offset of 25 pixels as well, and then I'm going to save the page now.
Remember, those offsets mean that it's going to push it down from the top edge by 25 pixels and push it from its right edge over to the left by 25 pixels. But if I go out of my browser and refresh the page, you can see what happens to element 1. It's removed from normal document flow, so Two and Three move up, just because it's part of the absolute position model, but One positions itself right over here, relative to the viewport. That's pretty much the exact same thing we saw with absolute positioning, but there's a very big difference.
Whereas, absolute positioning is always looking to the container elements to see who the nearest element, the nearest containing element has positioning is, fixed positioning does not care about that at all; in fact, if I go back into my code and I go to container, and I say, position relative, save that and refresh, it has no affect whatsoever. So elements that have fixed positioning don't care what type of positioning their containers have.
They are always relative to the viewport. Now what's the viewport? Well, the viewport is the available viewing space within your browser. So if I take the browser and I resize that, you can see that it remains fixed to the viewport, 25 pixels over and 25 pixels down. Now this has a lot of implications for scrolling. Let me show you what I mean. I am going to go back into my page, and I am just going to modify it really quickly. I am going to take this paragraph, copy this, and I am just going to paste it a few times, just to make sure that we have enough text in here to force scrolling if you will.
So if I save this now, go back up to my browser, and refresh it, the page is going to look a little weirder, but it's going to really reinforce its concept. You will notice that now if I scroll the page, that element remains fixed in position relative to the viewport, no matter what's happening to the page itself. Now on the one hand that's really cool, because I could put and ad over here, or a banner, or some navigational aids, and they're always going to stay in that position relative to the viewport and not really care what's going on the page. Of course, the down side of that is if the viewport size changes dramatically, you could end up with an element that's running right over the top of your content and getting in the way of something.
So obviously, fixed positioning isn't going to be right for every single layout that you are working with. However, recently a lot of designers are using it to provide users with ever- present navigation, like I was just talking about, feedback opportunities or as a way to display some type of related content. Now if you do decide to use it, you need to plan for how those fixed elements might interact with other elements on the page, especially if the browsers resize, and then how content might be overlapping if scrolling or something like that occurs.
Be aware also that fixed positioning isn't well supported in older browsers. Now by that I am talking about like Internet Explorer Version 7 and older, really old versions of Firefox, things like that. The support is even worse for older versions of mobile devices. So if you are going to use it, test it thoroughly based on your audience and then provide users with fallback options for when it's not supported.
There are currently no FAQs about CSS: Page Layouts.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.