Start learning with our library of video tutorials taught by experts. Get started

CSS: Page Layouts

Fixed positioning


From:

CSS: Page Layouts

with James Williamson

Video: Fixed positioning

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.
Expand all | Collapse all
  1. 4m 20s
    1. Welcome
      54s
    2. How to use the exercise files
      3m 26s
  2. 1h 39m
    1. Box model review
      8m 47s
    2. Calculating element dimensions
      11m 11s
    3. Understanding margin collapse
      7m 59s
    4. Calculating em values
      7m 41s
    5. Calculating percentage values
      7m 51s
    6. Normal document flow
      13m 3s
    7. Controlling element display
      8m 53s
    8. Using CSS Resets
      7m 11s
    9. Fixed, fluid, and responsive layouts
      9m 9s
    10. CSS debugging tools
      6m 46s
    11. Using the Firebug Inspector and the WebKit Web Inspector
      11m 5s
  3. 53m 15s
    1. Page design workflow
      3m 6s
    2. Page design tools
      4m 56s
    3. Determining page structure
      7m 18s
    4. Creating image assets
      8m 58s
    5. Creating initial page structure
      7m 3s
    6. Adding meaning with classes and IDs
      5m 23s
    7. Structuring content with HTML5
      6m 6s
    8. Building internal structure
      10m 25s
  4. 1h 36m
    1. Floating elements
      7m 50s
    2. Clearing floats
      7m 28s
    3. Containing floats
      7m 50s
    4. Clearfix technique
      10m 38s
    5. Floating inline elements
      14m 34s
    6. Two-column floated layouts
      8m 17s
    7. Three-column floated layouts
      11m 30s
    8. Column height considerations
      7m 3s
    9. Creating equal-height columns
      10m 42s
    10. Floats: Lab
      5m 25s
    11. Floats: Solution
      5m 21s
  5. 51m 42s
    1. Relative positioning
      7m 59s
    2. Absolute positioning
      8m 59s
    3. Fixed positioning
      4m 23s
    4. Controlling stacking order
      8m 31s
    5. Clipping content
      8m 21s
    6. Controlling content overflow
      5m 38s
    7. Positioning elements: Lab
      3m 59s
    8. Positioning elements: Solution
      3m 52s
  6. 48m 46s
    1. Design considerations for fixed layouts
      3m 28s
    2. Establishing the layout grid
      7m 57s
    3. Defining column spacing
      9m 30s
    4. Applying the grid through CSS
      8m 56s
    5. Creating grid-based assets
      8m 26s
    6. Grid design resources
      6m 22s
    7. Building fixed layouts: Lab
      4m 7s
  7. 44m 35s
    1. Designing for flexible layouts
      2m 30s
    2. Calculating percentage values
      8m 45s
    3. Setting flexible width values
      6m 6s
    4. Making images flexible
      8m 10s
    5. Setting minimum and maximum widths
      7m 24s
    6. Building flexible layouts: Lab
      4m 53s
    7. Building flexible layouts: Solution
      6m 47s
  8. 49m 36s
    1. Responsive layout overview
      3m 49s
    2. Using media queries
      7m 16s
    3. Organizing styles
      8m 39s
    4. Making content responsive
      8m 33s
    5. Mobile design considerations
      7m 32s
    6. Building responsive layouts: Lab
      4m 23s
    7. Building responsive layouts: Solution
      9m 24s
  9. 1h 22m
    1. Creating multi-column text
      6m 36s
    2. Using borders to enhance design
      13m 59s
    3. Rounding corners
      6m 56s
    4. Adding drop shadows
      10m 35s
    5. Working with opacity
      6m 8s
    6. Utilizing the background property
      15m 5s
    7. Working with CSS sprites
      7m 58s
    8. Enhancing page design: Lab
      6m 22s
    9. Enhancing page design: Solution
      8m 38s
  10. 6m 25s
    1. Additional resources
      6m 25s

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
Please wait...
CSS: Page Layouts
8h 57m Beginner Feb 07, 2012

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.

Topics include:
  • Reviewing the box model
  • Calculating em and percentage values
  • Controlling how elements display
  • Creating fixed, fluid, and responsive layouts
  • Structuring content with HTML5
  • Floating elements
  • Using relative, absolute, or fixed positioning
  • Defining column spacing
  • Creating grid-based assets and layouts
  • Considering mobile-design-specific issues
  • Working with multi-column text
  • Enhancing page design CSS Sprites
Subjects:
Web Web Design
Software:
CSS
Author:
James Williamson

Fixed positioning

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.

Share a link to this course
Please wait... Please wait...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed CSS: Page Layouts.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Welcome to the redesigned course page.

We’ve moved some things around, and now you can



Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked