Is my understanding of relative positoning correct in that:
An element with position:relative; but without any specified top, right, bottom and left values will act the same as if it had position:static?
The only difference would be that children could be positioned relative to this and that it’s z-index stacking order could be set?
Are there some known browser differences/bugs if position:relative; set or anything other than the 2 exceptions written…i’m just wondering when debugging if I could assume that position:relative without specified coords will act the same as static…
Are there some known browser differences/bugs if position:relative;
Slightly off topic but if you move a static element with negative margins which moves it outside its parent then the chances are that in IE6 (and occasionally 7) the part of the element outside of the parent will be invisible because it seems to get painted under the background.
The solution is just to add position:relative (without co-ordinates) and the problem is fixed. (z-index would only need be applied if it was overlapping an element with a higher z-index but as Jason said above if overlapping a static element then no z-index is needed)
One other detail you need to keep in mind: relative and absolute positioned elements depth-sort OVER static ones, so if you use positioning with position:relative or a negative margin, keep that in mind.
Many times I have a depth sorting issues I just add position:relative and leave the other element at the default (static) without bothering to mess with z-index.
A RP element basically gets a box made over it, and it takes the colors/etc from the original box.
Lets call the original element (before RP) 1
The box that steals the 1’s colors/background etc, 2
2 steals the colors/background from 1 and 2 gets placed over one. Using coordinates such as top/right/bottom/left will move 2, but it will keep 1 in place, thus preserving the space
RP acts as a containing block for absolute children, so it’s not the same as position:static (though there are similarities)
You don’t have to worry about positioning when using position:Relative, unless you set a child to position:absolute, and then THAT elements positioning may change
Don’t set position:relative on a lot of elements though, that’s just asking for trouble. Use it sparingly, and only when needed. Don’t abuse
@dnordstrom - Thanks for the link it explained the concepts of positioning pretty well and also has some other interesting articles on there!
@ryan - Thanks for the descriptive example on the concept, it seems it’s one of the things that are actually supported pretty well as when it comes to browser compatability.
