The style declarations contained within this page:
P.start {line-height: 24px; font-size: 12px; width: 400px;
color: black; background: white;}
#outer {color: purple; border: 1px solid purple; position: relative; top: -12px;}
#inner {color: blue; border: 1px solid blue; position: relative; top: 12px;}
DIV {background: yellow; height: 50px; width: 250px; margin: 10px;}
IMG.cl1 {position: relative; top: 30%;}
IMG.cl2 {position: relative; right: -30%;}
IMG.cl3 {position: relative; bottom: 30%;}
IMG.cl4 {position: relative; left: 30%;}
IMG.cl5 {position: relative; top: -20px;}
IMG.cl6 {position: relative; right: -20px;}
IMG.cl7 {position: relative; bottom: -20px;}
IMG.cl8 {position: relative; left: -20px;}
SPAN.cl9 {position: relative; top: -1em; left: -5em; color: purple;}
SPAN.cl10 {position: relative; bottom: -1em; right: -5em; color: purple;}
[start] The beginning of the paragraph contents. [outer] The beginning of the outer SPAN. [inner] The contents of the inner SPAN. [outer] The end of the outer SPAN. The end of the paragraph contents.
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.
This paragraph contains a SPAN element [cl9] which has been shifted up, and to the left, which demonstrates relative positioning.
This paragraph contains a SPAN element [cl10] which has been shifted down, and to the right, which demonstrates relative positioning.