Relative positioned divs

An absolute positioned div contained within a relative positioned div is common practice in CSS, but what does it do?

The original intention of position: relative, is that you can move its position relative from its original location.

An example: we want to raise B (move it up) by 4 pixels. Code:

A<span style="position: relative; top: -4px;">B</span>



A more popular use of position: relative is resetting the origin for its contained elements, so that the coordinates of all absolute positioned elements within this div refer to this div rather than the page. Now you can easily position elements within the div.

Example code:

<div style="position: relative; width: 100px; height: 100px; border: 1px solid black;">
<div style="position: absolute; top: 0; left: 0; width: 10px; height: 10px; border: 1px solid green;"></div>
<div style="position: absolute; bottom: 5px; right: 20px; width: 10px; height: 10px; border: 1px solid red;"></div>