Free Consultation: +1 (888) 374 0906

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.

Resources


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.asp
http://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.
Write A Comment

Post A Comment

 
Submit

Sign up for email updates from our team

View Our Privacy Policy or Terms of Use