lol ryan i like the way u explained. its like a ninja so abs isn’t good. i guess coz if other element can’t recognize its there. they can create problem.
Well, now, let’s not be so down on ninjas. Sometimes a ninja is exactly what you need: we use absolute positioning often in certain techniques, such as Gilder-Levin image replacement (for example). Or, a CLOSE button on a lightbox div.
The important thing to remember about position: relative (since you already now have the important thing about absolute) is that when you make a box (say, a div), it’s position: static.
When you say “position: relative” on that box, what you actually are doing is making another box. You don’t see it. The specs call this a “generated box” and it has on it everything you could see on the old box: any borders, backgrounds, and children it had.
The original box becomes invisible, and generally this doesn’t matter if you don’t add any coordinates because the new box is sitting precisely over the old box.
When you start adding coordinates like top and left, then you may have a problem if you don’t know what’s happening: the old box doesn’t move. It continues to take up space right where you created it.
The box you see moving is the new box. So a common question some people have with relative positioning is, why do I have this extra unwanted space and how do I get rid of it?
Another thing to be aware of is, because this new box is sitting “above” the old box (like a new sheet of paper sitting over another sheet of paper), it has a higher z-index naturally (so, even if you don’t state “z-index”, it is still sitting a bit higher than the other static boxes on the page). So when you’re moving this new box around, it covers the other boxes.
Absolutely positioned boxes also have a naturally higher z-index; this is even higher than the relatively positioned boxes. I think of abso-po’d boxes as like mattresses floating on the surface of the ocean while all the other boxes are on the ocean floor. They can’t see the mattress, and the matress can’t see them (other than its nearest positioned ancestor of course : )
They do all have a place where they belong. None of them are evil or even Bad Things To Use. They’re bad only because people start out using them right away, when the real goal is to keep elements acting naturally and in the flow as much as possible (unless you are doing a l33t ninja CSS trick : )
