CSS Positioing
HTML element positiong using CSS is one of the harder subjects to wrap your head around. And to make things worse, you might get different results depending on the parent element of the element you're trying to position.
Positiong troubles can mean the difference between a nice looking site and one that just looks awful. Lets take a minute and try to de-mystify the CSS position styles.
Lets talk about about the 4 positions
Static
The static position is also the default. If you create and HTML element and provide no CSS position then you have in fact created a static positioned element.
Static positioned elements behave exactly as you would expect. They follow the flow of the page layout. They also CAN'T be moved using the CSS top, bottom, right, and left properties
You can see from the example below how this works. There are 2 divs, the inner div is postiioned staticly. The orange of the container div can be seen bordering the staticly positioned inner div. That is an important note. The inner div affects the outer div in this case. The padding of the outer div creates the orange border because if must pad itself based upon the size of the inner div.
I'm a static div element inside another div
Fixed
Fixed position elements are fixed based upon the browser window as a whole. They do not care where in your HTML they were placed. They fix their selves outside the flow of your document layout. The remainder of your elements really don't know about the fixed element at that point.
Fixed position elements can be placed using the the CSS top, bottom, right, and left properties. Based upon the CSS z-index property of a fixed element, that element can either be behind or on top of other elements.
Fixed position elements are also not affected by scrolling. They retain their "fixed" position no matter how far you srcoll.
You can see the pink fixed element in the top right corner of this page. It will remain there even as you scroll and even if you shrink your browser's width.
Relative
A relative positioned element is positioned, you guessed it, relative to where it would have been positioned had you never gave it a relative position.
This one is pretty cool. Just setting it's position as relative doesn't do much at first glance but as you begin to push the element around using the CSS top, bottom, right, and left properties you can see how this one works. Do you have two images next to each other on your page? Do you want one to overlap the other? Simply position on relative and push it over the other.
Do keep in mind that you may have to play with the element's z-index to get the right item on top if multiple items are positioned something other than static.
Or example here is covering some gibberish text below! It's also important to note that our relative positioned element is inside another div just like the static one above is. Notice how you don't see the orange border? Keep that mind when playing relative positioned elements.
Also, see that gap between the relative element and the next section about Absolute positioning? Relative positioned items retain the original space that they came from. This is also another thing you have to look out for when playing with relative positioned elements.
blah blah blah blah test test test CSS CSS CSS HTML HTML HTML DBC DBC DBC DBC Tommy Tommy Tommy Tommy fun fun fun blah blah blah
I'm a fixed div element
I'm a relative div element
Absolute
Absolute positioned elements are similar to fixed. Marking an element's position as absolute removes it from the normal flow of the layout. Other elementes are un aware of the element at that point. The space that the element used to reside in is not reserved like a relative positioned element acts.
Absolute positioned elements can be placed anywhere on the page using the CSS top, bottom, right, and left properties but here is how they differ from fixed elements. They are stuck to the page and not the browser window. If you scroll, the absolute element scrolls with the page.
Our example is positioned absolutley to left of this section. See how it scrolls with the page?
I'm an absolute div element
Conclusion
In the end, the best way to learn the position properties is to play around with them. Do like I did, color a div and name it the position. Play around with the CSS and see what it does.
CSS positioning is very powerful and once you learn it there is no end to what you can build.
If you still have questions, I suggest you visit The W3 Schools on CSS Positioning to read more and to play with some of their examples!