<HTML>
<HEAD>
<STYLE type="text/css">
BODY {line-height: 250%}
</STYLE>
</HEAD>
<BODY>
<P>여기서부터 본문이 시작합니다. 
<SPAN id=outer>여기는 outer에 해당하는 내용이 시작하는 곳입니다.
<SPAN id=inner>이곳은 Inner의 내용이 들어가지요.</SPAN>
여기까지 outer의 내용은 끝입니다.</SPAN>
그리고, 본문이 끝났습니다.
</P>
</BODY>
</HTML> 이렇게 나와요

#outer {color: red;}  
#inner {color: blue;} 이렇게 나와요

Relative positioning

  
BODY {line-height : 80%}
#outer {position: relative; top: -12px; color: red;}
#inner {position: relative; top: 12px; color: blue;} 이렇게 나와요

Floating

<HTML>
<HEAD>
<STYLE type="text/css">
BODY {line-height: 200%}
#outer {color: red;}  
#inner {float: right; width: 130px; color: blue;} 
#sibling {clear: right; color: red;}
</STYLE>
</HEAD>
<BODY>
<P>여기서부터 본문이 시작합니다. 
<SPAN id=outer>여기는 outer에 해당하는 내용이 시작하는 곳입니다.
<SPAN id=inner>이곳은 Inner의 내용이 들어가지요.</SPAN>
<SPAN id=sibling>이곳은 Sibling의 내용이 들어가지요.</SPAN>
여기까지 outer의 내용은 끝입니다.</SPAN>
그리고, 본문이 끝났습니다.
</P>
</BODY>
</HTML> 이렇게 나와요

Absolute positioning

#outer {position: absolute; top: 150px; left: 150px; width: 200px; color: red;}
#inner {color: blue;} 이렇게 나와요

#outer {color: red;}
#inner {position: absolute; top: 200px; left: -50px; 
width: 130px; color: blue;} 이렇게 나와요