When I first started coding HTML & CSS I shied away from positioning elements. It was unpredictable. What would work well in one browser was way out to lunch in another and I just couldn't rely on it.
I've since learned how to do it properly so that my divs are always where they were placed, exactly where I placed them. Today I'll share that skill with you.
Relative vs. Absolute Positioning
A relatively positioned element will appear where it is placed relative to the elements inside of it. The space it occupys is preserved within the rest of your elements.
An absolutely positioned element will appear where it is placed in regard to it's containing block that is something other than static
. The most important thing to note however is that an absolutely positioned element is removed from the normal flow of the rest of your page.
The jist of this is that if you are going to position an item absolutely and want to have complete control over where it rests in your page you need to position the containing element relative.
absolutely positioned element
The other crucial piece of information is the one from above in which your absolutely positioned element is removed from the normal flow of your page
Things no longer cascade around it. It sits above the rest of the structure of your page.
This could be a good thing depending on what you want to do or why you've positioned the element or it could wreak havoc on your brain.
This tutorial is meant to be a quick overview for those who are already familiar with the basic concepts of CSS positioning. For a refresher or review please visit:http://www.w3schools.com/css/css_positioning.asphttp://www.vanseodesign.com/css/css-positioning/http://www.alistapart.com/articles/flexiblelayouts/
Also the O'Reilly text on Cascading Style Sheets
is an excellent Resource for all things CSS.