Let's take some element in its default static state and make it position: relative;. Just by changing that value alone, nothing happens. It appears in the exact same place that it did before the change. But it does change two things:
- It's original location will still be occupied by the element (like there is a ghost of the original element still there taking up space).
- If the element has child elements that are absolutely positioned, they are now absolutely positioned within the context of this element.
Advantages
If all elements started out with relative positioning, all two of the items above you'd have naturally. Your top/right/bottom/left values work as you would assume they do right out of the box. Z-index "just works" as well. The positioning context is always constrained to the next parent element, which makes logical sense.
Disadvantages
Most notably, always constraining the positioning context to the parent element is limiting. Let's say you want to position an element in the upper right of the page regardless of where the element appears in the markup. That's going to be tough if the element is buried down the hierarchy. You'll need to reset that positioning context for every parent element. That means setting them back to position: static;, and losing all the benefits of relative positioning along the way.
position: absolute
to element related to its parent's parent? In this case you would have to setposition: static
to parent. – Feriaposition: static
) – Fifteendisplay: block
elements, not oninline
elements though. Alsotable
related elements might give you unexpected results. – Mcguigan<li> = display: list-item
,<table> = display: table
,<span> = display: inline
etc. – Feria