Share about position:relative in CSS; what's the effect?

For the position:relative in CSS; I still don't understand what it means, what does it do?

I understand a few other attributes of position.

Reference

Static: No special positioning, object follows HTML positioning rules
Absolute: Drag objects out of the document stream and use attributes such as left,right,top,bottom for absolute positioning. And its cascade is defined by the Z-index property. Objects do not have margins at this point, but they still have padding and borders
Relative: objects are not stackable but will be offset in normal document flow based on attributes such as Left,right,top,bottom
fixed:ie5.5 and NS6 do not yet support this property

For several properties in the document, in addition to relative, the other try, the effect came out, for a relative, it is difficult to understand. The

is not a relative location.

for a static Div#demo in the page, I would like to have a div#sub in this #demo located somewhere in the upper right corner relative to #demo, which should be position:relative this bar, and then add top, Right to limit it.
I understand it correctly?

But in real-world development, I often don't get the expected results. I think it should be I have not understood this attribute thoroughly. Now I want to master this completely, just like Position:absolute to master it, how to get HTML elements to get HTML elements.
Please understand this point of friends to tell, or to give some information, links and the like can also.

Thank you.
Add:
Thank you for the link, but it has no depth, I would like to get a detailed understanding of position:relative.
Add:
Reeze, that's a good thing you're saying.
However, for the positioning of the element that declares the property itself? What does it do with its own top,left,right,bottom?
What you're talking about is the behavior of the child elements of relative. I want to know some of its own information.
Question added:
Doesn't it give a big explanation?

"For a static Div#demo in the page, I want to make this #demo in a div#sub relative to the #demo located in the upper right corner somewhere, it should be position:relative this bar, and then add top, Right to limit it.
I understand it correctly? "

First of all you have doubts, I first answer:
Position the default value is static, (that is, for any element, if it does not define its position property, then its position:static)

If you want a div#sub in this #demo to be located somewhere in the upper right corner relative to #demo, you should give #demo a relative positioning, #sub绝对定位. The

Absolute is positioned relative to its nearest parent element, and if you do not position the #demo relative, the absolute positioning of the #sub is relative to the body. The

Relative is positioned relative to itself, for example: #demo {position:relative;top:-50px;}, at which point the #demo moves 50px relative to its original position.

Another: relative does not detach from the document flow, absolute out of the document flow. That is: the element of relative, although it appears to deviate from its original position on the surface, is actually still unchanged in the document flow. The elements of absolute not only changed position, but also separated from the flow of documents.

Writes an example as follows:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >