Joy Of Code - Web Design Training and Consulting
Joy Gems Newsletter

My Position On Position

Share

By Bud Kraus
bud@joyofcode.com
Joy Of Code
Creator And Instructor

v5 i8
Originally Published: April 15, 2009

As one who teaches Cascading Style Sheets (the alchemy responsible for how most web pages look) I have some advice for those new to working with it.

Don't use the position property until you get very comfortable with CSS in general and other style properties in specific. In other words until you understand how the cascade works and are familiar with font, text, color, background, padding, border, margin, display and float properties I'd avoid using the quirky position property.

But, as I say to my CSS students, "For whatever reason, I'm sure you will ignore my advice and go use the position property anyway." It's just like telling a kid, "Don't touch that hot stove, Johnny, because you'll burn your fingers." Burn is the operative word here. The position property is tricky and you're going to get hurt if you haven't mastered the aforementioned style properties.

So, if you're not ready - if you haven't mastered the easier parts of CSS - the position property will confuse you, make a mess of your design, and ultimately may discourage you from developing your CSS skills to make beautiful web sites.

Which is exactly what I don't want to see happen to anyone!!

Does this mean you should never learn or use the position property? No. Along with floats and margins, position is an ingredient used in page layout. But if you just master working with floats and margins, you will do wonders for your designs.

What Is The Position Property?

Ah, you were wondering if I'd get around to defining what the position property does.

One of the cooler and more useful things position does is free you from styling your pages in "code order." That means you are no longer restricted to styling your XHTML elements by the order they appear in your source code.

This is very useful. Say you have elements, like a navigation bar, which repeats on every page. The code for that can be placed at the end of your .html file, but the navigation bar itself can be positioned near the top of your page. This is a good practice when you have elements, like a navigation bar, that will be on every page.

This concept is called "taking an element out of the normal flow" of a document. That is one of the most important uses for the position property.

But as I said, until you've mastered other parts of CSS, I'd hold off from moving XHTML elements out of the normal flow.