The style declarations contained within this page:
.cl1 {color: purple; position: relative; top: -10px;}
.cl2 {color: purple; position: relative; right: -10px;}
.cl3 {color: purple; position: relative; bottom: -10px;}
.cl4 {color: purple; position: relative; left: -10px;}
DIV {position: relative; background: yellow;
height: 50px; width: 250px; margin: 10px;}
This paragraph contains a SPAN element which has been [cl1] relatively positioned, which will cause it to move. The space it would have occupied will be preserved.
This paragraph contains a SPAN element which has been [cl2] relatively positioned, which will cause it to move. The space it would have occupied will be preserved.
This paragraph contains a SPAN element which has been [cl3] relatively positioned, which will cause it to move. The space it would have occupied will be preserved.
This paragraph contains a SPAN element which has been [cl4] relatively positioned, which will cause it to move. The space it would have occupied will be preserved.
The following DIVs have been engineered to create a context for positioning. The class of each test is noted at the beginning of the DIV. The percentage offsets should be calculated with respect to the width (250px) or height (50px) of the containing block, depending on the property being tested.
