An element can be moved out of the flow while still not disrupting it. What does that mean? Well, the position value relative on its own doesn't appear to do anything to an element's position. The dimensions of a relatively positioned element are automatically built into the web page's layout. The noticeable difference comes in when you also make changes to the element's left and top properties.
You can set a distance value (usually written in pixels) to either, or both, of these properties. The element's original location is represented by a value of zero for both left and top. But if you set the left property to a value of 100px, for example, that element will now display 100px over from where it was originally located.
As was mentioned above though, a relatively positioned element's dimensions are built into the layout. So the unique thing here is, even though you've moved the element away from its original spot, the space for its original spot is preserved. The element may be displaying 100 pixels over now, but it's won't affect the content flow in that new space.
|
<div></div> |
<div></div> |
Unless your layout idea has special need for it, there likely won't be much call for relative positioning on its own. However, when used in tandem with another positioning property, it can allow even more versatility in how you position web page elements. We'll discuss this combination technique right after we talk about the other position type involved.
