Normal, relative, floating, absolute positioning 비교
◀ ▶
각각의 positioning 방법을 비교하기 위해 아래와 같은 문서가 있다고 가정하자. 아래 나오는 예는 BODY 부분은 변하지 않고, STYLE에 들어가는 속성만을 바꾸어 준 것이다.
<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> 이렇게 나와요
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>여기서부터 본문이 시작합니다. 
<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;} 이렇게 나와요
◀ ▶