Relative vs Absolute position

        <p>Positioned element are the elements with relative or absolute setting value for the position style. Non-positioned element are the element without these value for the position style.Left/Right style can be used together to with positioned elements to control their position, but they have no effect for non-positioned elements.</p>

        <p>Absolute positioning object is taken out of the normal flow. It is position calculated base on the left/right attribute and its closest ancestor setting or the body, whichever is first found in the DOM tree. Relative positioned element is position according to its left/right attribute and the position of the element in normal flow. Even the element is reposition relative to its normal flow position, the place of the element in normal flow still can not be used. But the absolute positioning element is not taken any space at all, it seems to be floating below or above. So there is some overlapping, if its z-index is not set properly.</p>

        <p>
        There is a side-effect of the absolute setting, it make the element to display inline if there is not height/width specified. But relative positioned element keep
        their original displayed mode.
        </p>