Lesson 28 – Position:Fixed

Absolute positioning is good, very good, in fact, but sometimes you may end up in a situation where it’s not the answer. This is where fixed positioning comes in. Does the word ‘fixed’ sound familiar? If it does, you’re right to think so. Think back to this post, with the non-repeating backgrounds, and you’ll find out. Except, with Divs, you need to position it in pixels, not just by typing ‘center’, or ‘left bottom’, etc. Here’s the code you’ll need:

#IDNAMEGOESHERE { border: 2px groove #3399DD; font: 12px Arial; text-indent: 3px; height: 200px; width: 300px; overflow: auto; position: fixed; left: 100px; top: 100px; right: 100px; bottom: 100px; }

• There’s not much to it, really, is there? It’s very similar to absolute positioning, except that you put “position: fixed;” rather than “position: absolute;”.
• Remember that you can’t position it using left, right, top and bottom. You can only use combinations such as left bottom, and right top.
• This will have the same effect as it did on your backgrounds. When you scroll down on your page, the Div Box will remain in the same position, always. At times this can be very useful, for features on your webpage such as navigation, for instance.

The only warning I’ll give you, is to be careful where you position your Div Box in relative to other text that you may have on your page. You don’t want to have your fancy Div blocking all of your text, now do you? Bye.