A coworker asked me about CSS positions. I admit I’m no expert in this topic. However, I want to illustrate my brief understanding. Maybe you will find them helpful.
Default, you don’t have to set it.
It’s like a ghost image. Setting the corresponding properties of top, left, right, or bottom will move this element out of the its original document location but it will not affect any surrounding elements. The surrounding elements will treat it as if its position never changed.
Takes the element out of its normal document location. The corresponding properties of top, left, right, bottom will be based off its first parent element whose position is not static. Check out this example to get an idea. The parent element is bubbled all the way up until it finds the document window.
Similar to the absolute position except its parent element is the browser window. I’ve tried using this many years ago and found that IE didn’t support it. It sounds like pre IE 8 never supported it properly. Because of this, I never found a great use for it.
If I confused you, the positions are explained in greater details here. I find it very well written.