Join Bill Weinman for an in-depth discussion in this video Using fixed positioning, part of CSS Positioning Best Practices.
- View Offline
In this lesson, we are going to talk about the fixed positioning technique and here's an example of it here. I have the browser in the bottom-half of the window this time with the text in the top-half and that way we can show the window scrolling. So as you see, when I scroll the browser here, this image stays fixed in the bottom right-hand corner of the browser window. In fact, if I scroll side-to- side, it does the same thing. It stays fixed there. It's a fixed number of pixels from the right and the bottom of this view window.
So you'll notice when the bottom scroll bar disappears the image moves down. So it remains this fixed number of pixels from the bottom. So here's how that's accomplished up here in the text editor. Let's see in the style section. I have the style sheet. Image fixed image. That's an ID selector and we have position: fixed, right: 15 px, bottom: 15 px. So that's the number of pixels from the right and from the bottom. So that positions it relative to the right and bottom boundaries of the viewing portal.
Now down here in the XHTML, you'll see here is the image as ID equals fixed image and the rest of it is just a normal image tag. So if I want to move it, just come up here to the style and I'll say left: 15 px. I'll save that and reload and the image moves over here to the left side. Likewise, it just stays fixed and I can do this, change bottom to top, and that will be in the left to top.
That's how that works. Likewise, I can do this with text, and I've set up a style for doing this with text. Right here, I've created a textbox. It's 200 pixels wide, and it's positioned five pixels from the top and five pixels from the left. So we move the image out of the way here, I'll move that to the right top for now. I'll save that and reload and now the image is over there so we can play with that upper-left corner. So this one is called fixed text and it's a div ID selector.
So I just take some of my text, I'm going to take it right out of the middle here. I'm going to take this AMTP right out of the middle and I'm going to put this div here. ID equals fixed text and close the div down here. And I might want to spell this correctly and I'll just save that and I'll take this AMTP right out of the middle of this document and instead it'll have BW Whois and then writing, because fixed elements do not appear anywhere in the flow of the document.
They are outside of the flow, they are outside of the wrapping, they are outside of all of that relativistic layout and instead they just float. And so hit reload and now we have Whois, we have the writings, and AMTP is up here in that corner and you notice as we scroll, it stays right where it's put and it actually extends over the bottom of the window if I bring this up so that it doesn't do that anymore. Of course, we don't have scroll bars anymore because it's larger than anything else. But you'll notice that it doesn't create the scroll bars itself.
Scroll bars don't happen until I start impacting the rest of the text and of course that doesn't scroll. This is a technique that's sometimes used for menus on web pages and you'll see the menus stay in your viewport even when you scroll the page and so it's commonly used for that. So that is the fixed positioning model and that concludes our discussion of CSS positioning and now we'll go into the next chapter where we'll build a website using the techniques we've learned here.
- Understanding style sheets and levels of inheritance
- Learning how to use CSS units of measure in page layout
- Laying out content on a page using absolute, relative, float, and fixed positioning
- Using CSS positioning to place menus, buttons, graphics, and columns precisely on a page
- Using templates to improve workflow
- Creating a full working web site, step by step