CSS, position:absolute, position:relative의 차이점
CSS position 속성에는 다음과 같은 값을 사용할 수 있으며 position속성을 사용하지 않으면 위치를 지정하는 left, right, top, bottom등의 속성을 사용해도 아무런 효과도 보지 못한다
- static position속성을 사용하지 않은 경우에 적용되는 디폴트 속성 값
- relative 디폴트 위치에 대한 상대적 위치를 top, left, right, bottom 속성으로 지정함
- absolute position 속성을 가진 부모 컨테이너(position:static제외)의 원점에 대한 상대적 위치를 top, left, right, bottom 속성으로 지정함. 부모 컨테이너가 없는 경우에는 <body>의 원점에 대한 상대적인 위치를 지정함. absolute가 적용된 요소는 페이지의 기본 요소배치 원칙에서 제외된다
- fixed 화면의 뷰포트를 기준으로 한 상대위치 지정. 페이지 스크롤에 영향을 받지 않음
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Test</title>
<link rel="stylesheet" type="text/css" href="sample.css">
<style type="text/css" >
span { border:1px solid black;}
#sp4 { position:relative; left:10px; }
#sp5 { position:relative; left:20px; }
#sp7 { position:absolute; left:80px; top:170px;}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<br>
<span>span1</span>
<span>span2</span>
<p>
<span id="sp3">span3</span><!-- position속성을 적용하지 않으면 각 엘리먼트는 -->
<span id="sp4">span4</span><!-- 정상적인 디폴트 위치를 지킨다. position:static와 동일 -->
<p>
<span id="sp5">span5</span><!-- sp5가 원래위치에서 20px우측에 있고 -->
<span id="sp6">span6</span><!-- sp6은 원래의 위치를 지키므로 sp5와 sp6은 위치가 겹친다-->
<p>
<span id="sp7">span7</span><!-- sp7 absolute속성을 가지면 문서의 정상적인 흐름에서 제거되므로 -->
<span id="sp8">span8</span><!-- sp8이 페이지의 왼쪽에 붙게된다-->
<p>
</body>
</html>