CSS中position:relative;の役割

positionのデフォルト値はstaticです(つまり、いずれかの要素についてpositionプロパティが定義されていない場合、そのposition:static)

<span style="font-size:14px;"><div id="demo">
	<div id="sub"></div>
</div></span>

この#demoのdiv#subを#demoに対して右上隅に位置させたい場合は、#demoに相対的に位置させ、#subは絶対的に位置させるべきです.absoluteは自分の最近の親要素に対して位置決めされています.もしあなたが#demoに相対的に位置決めしなければ、#subの絶対的な位置決めはbodyに対して位置決めされます.relativeは自分に対して位置決めされています.例えば、#demo{position:relative;top:-50 px;}この場合、demoは元の位置に対して50 px上に移動します. 
また、relativeはドキュメントフローから離れず、absoluteはドキュメントフローから離れます.すなわち、relativeの要素は、表面的には元の位置からずれているように見えますが、実際にはドキュメントストリームでは変わりません.absoluteの要素は位置が変わっただけでなく、ドキュメントフローからも離れています. 
原文住所:http://www.iteye.com/problems/5997/