Absolute vs relative positioning

The question always comes up at some point: which positioning should I use to get the site to look the way I want it to. Would absolute vs relative positioning create the layout and effect I am aiming for? I think this article and demo are really a clear and to the point. What do you think?

5 Different Position Values

Let’s get some complexity out of the way up front. In reality, there are a whopping five different possible values for the position property. We’ll largely skip over inherit because it’s pretty self explanatory (simply inherits the value of its parent) and isn’t really supported well in older versions of IE.

The default position value for any element on the page is static. Any element with a staticpositioning context will simply fall where you expect it to in the flow of the document. This of course entirely depends on the structure of your HTML.

Another value that you’ve no doubt seen is fixed. This essentially anchors an object to the background so that wherever you place it, there it will stay. We often see this used on sidebar navigation elements. After scrolling down a long page of content, it’s a pain to go back to the top to navigate elsewhere so applying a fixed position to the navigation means the user never loses site of the menu. Click the image below to see a live example of this in action.

So there you have three position values that are fairly straightforward and easy to wrap your mind around. The final two are of course absolute and relative. Let’s focus on explaining these independently and then take a look at how they can be used together to achieve unique results…

Read the full article using the link below.

Embedded Link

The Lowdown on Absolute vs. Relative Positioning | Design Shack
Reading an article entitled The Lowdown on Absolute vs. Relative Positioning on Design Shack.

Google+: View post on Google+