<HTML>
<HEAD>
<TITLE>Comparison of positioning schemes</TITLE>
<style>
body { display: block; font-size:12px; line-height: 200%;
width: 400px; height: 400px }
p { display: block }
span { display: inline }
#outer { position: relative; top: -12px; color: red }
#inner { position: relative; top: 12px; color: blue }
</style>
</HEAD>
<BODY>
<P>Beginning of body contents.
<SPAN id="outer"> Start of outer contents.
<SPAN id="inner"> Inner contents.</SPAN>
End of outer contents.</SPAN>
End of body contents.
</P>
</BODY>
</HTML>