Normal, relative, floating, absolute positioning 비교
각각의 positioning 방법을 비교하기 위해 아래와 같은 문서가 있다고 가정하자.
아래 나오는 예는 BODY 부분은 변하지 않고, STYLE에 들어가는 속성만을 바꾸어 준 것이다.
<HTML>
<HEAD>
<STYLE type="text/css">
BODY {line-height: 250%}
</STYLE>
</HEAD>
<BODY>
<P>여기서부터 본문이 시작합니다.
<P id=outer>여기는 outer에 해당하는 내용이 시작하는 곳입니다.
<P id=inner>이곳은 Inner의 내용이 들어가지요.</P>
여기까지 outer의 내용은 끝입니다.</P>
그리고, 본문이 끝났습니다.
</P>
</BODY>
</HTML>
Normal flow
outer와 inner 부분의 글씨 색을 바꾸어본다. 배열에는 아무 차이가 없다.
#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>여기서부터 본문이 시작합니다.
<P id=outer>여기는 outer에 해당하는 내용이 시작하는 곳입니다.
<P id=inner>이곳은 Inner의 내용이 들어가지요.</P>
<P id=sibling>이곳은 Sibling의 내용이 들어가지요.</P>
여기까지 outer의 내용은 끝입니다.</P>
그리고, 본문이 끝났습니다.
</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;}