Relative positioning

Setting the cascading style sheet position property to "relative" places an element in the natural HTML flow of the document, and offsets the position of the element based on the preceding content.

Placing a piece of text in a paragraph with relative positioning renders the text relative to the text in the paragraph that precedes it, as demonstrated in the following code sample:

<p>The superscript in this name<span style="position: relative; top:-3px">xyz</span> is "xyz".</p>

If the user resizes the window, the "xyz" will still appear three pixels above the natural baseline of the text. Similarly, you can set the left property to change the horizontal spacing between "name" and "xyz". If the contents of the span were absolutely positioned, the "xyz" would be placed relative to the HTML element (or the next positioned element in the hierarchy), and the "xyz" would be barely visible in the upper-left corner of browser window, which is probably not the effect you intended.

Text and elements that follow a relatively positioned element occupy their own space and do not overlap the natural space for the positioned element. Contrast this with an absolutely positioned element, where subsequent text and elements occupy what would have been the natural space for the positioned element before the positioned element was pulled out of the flow.

Relatively positioned elements may overlap with other objects and elements on the page. You can use the z-index property to set the z-index of the positioned element relative to other elements that might occupy the same area. By default, a positioned element always has a higher z-coordinate than its parent element does, which means that it will always be displayed on top of its parent element.

Community Additions