One of the essential elements to becoming a CSS expert is understanding how the position property works. If you don’t know how its various properties function you’ll be severely limited graphically and unable to fix various CSS elements that crash on your pages. Whether you are an experienced web design veteran or a beginner this guide will help advance your CSS arsenal.
Static Positioning
Definition
To start with the basics of CSS, let’s talk about static positioning. Everything set to this property conforms to the natural page order. Think of statically positioned elements as a cement wall, it cannot be removed completely, nor can it be moved at all. Everything you write in CSS defaults to this positioning.
Diagram
Snippet
p { display: static }
Example
Here is an example of Amazon.com without any CSS. By default all elements are displaying with a position of static. Although, if IE 6 somehow managed to violate this principal, I wouldn’t be surprised.
Practical Application
Everything you create by default will assume its position like an orderly flock of lemmings. The reason why I use this analogy is sometimes you might get an element that will inherit something other than static positioning and start flying across the page. For example, in a few instances I’ve had header items inherit non-static positioning. Just use the position: static property to fix it.
Relative Positioning
Definition
If static positioning is a cement wall, then that would make relative positioning more like a brick. A brick is still used in a house and has placement, but it can be moved around relatively easily (unlike our solid wall). Relative positioning accepts positive and negative values for top, right, bottom, and left properties. Think of using these properties as a way of “nudging” elements from their original position. The browser will read relatively positioned elements as if they are static, but also allows you to move them.
So, if we move an element. The browser will nudge it as indicated, but at the same time it won’t fly out of the flow of items either (see diagram below).
Diagram
Code Snippet
p { position: relative; top: 15px; left: 20px }
Example
The following logo has a gradient with a png on the background. Because the logo doesn’t quite fit inside the container for the rest of the site, we can nudge it to the left with relative positioning.
Practical Application
To be honest, I rarely use relatively positioned elements in my project. The only time I really use them is to tweak images and containers a couple pixels. What they’re really meant for is containing absolutely positioned elements from flying off the screen (more to follow on that next).
Absolute Positioning
Definition
This property makes page elements fly out of their container until they shoot off screen or hit the <html> block. The only super power in the world that may contain them is position: relative. This property is your only hope, as it will keep the absolutely positioned elements inside of it. You’ll need this in your arsenal for creating heavily graphic based designs.
Diagram
Code Snippet
div { position: relative }
img { position: absolute; top: 50px; right: 0; }
Example
CSS Formula’s social media box has a Twitter, Facebook, and RSS icon above positioned via absolute positioning. Instead of individually positioning all of the icons, we are moving the container (a div) all the way to the right.
Practical Application
If there is one thing you learn about absolute positioning it should be Fahrner Image Replacement. This technique replaces text with an image in a user friendly way. I could go into more detail on this, but this technique is quite complex for an introduction to the CSS position property. If you are interested in more information check out the Wikipedia page.
Fixed Positioning
When using fixed positioning your targeted html element will align itself according to the browser’s window. This means no matter how much somebody scroll’s on a website, the element will be in the exact same place. Think of it as “pinning” an element to the browser’s window and removing it from the flow of everything else in the website.
Diagram
Snippet
img { position: fixed; top: 0; left: 150px }
Example
The popular Twitter hybrid known as TweetMeme sports fixed positioning for their Feedback and Help buttons. When scrolling on their site the buttons stay fixed to the left of the browser’s window and don’t move at all.
Practical Application
Rarely will you use fixed position with anything on a website unless you are an evil marketing guru bent on shoveling as much advertising as possible on top of innocent people (not a good practice). Most of the time you see it being used to position sidebars and put icons on the side of your screen. Nothing too fancy, but it’s good to be aware of fixed positioning.
