[css] position 속성 - relative, absolute, fixed

Tip : 포지션을 사용하기 전에 포지션을 많이 사용하는 것은 개발하면서 예상치 못한 문제가 발생할 수 있기 때문에 사용을 지양하는 것이 좋다.

포지션은 HTML을 이쁘게 꾸며주는 기능을 하는 css에서 HTML요소들의 위치를 정하는 방법 중 한 가지이다.
포지션을 정하는 방법은 아래와 같이 4가지가 있다.

1. static position
2. relative position
3. fixed position
4. absolute position

4가지의 차이점은 요소를 이동시킬 때 누구(어떤 태그)를 기준으로 이동할지 차이가 있다.
이중에서 static position은 기본값으로 자주 사용되지는 않으니 3가지를 알아보자.

relative position

상대위치 포지션으로 html문서에서 적용된 요소의 위치를 기준으로 위치를 설정한다.
쉽게 말하면 기준이 "자기 자신"이 되어 움직인다는 것인데

div {
	width: 20px;
	height: 20px;
	position: relative;    // 현재 div 위치를 기준으로 
	top: 20px;    // 위에서 20px만큼 아래로 내려온다.
}

absolute position

절대위치 포지션으로 absolute를 작성한 태그의 조상요소 중에서 가장 가까운 relative를 가진 태그를 기준으로 위치를 잡는다.

<main>
  <span>
  	<div> 2 </div>
  </span>
</main>

위의 html에서 div태그의 부모태그는 span태그이고 div의 조상태그는 main태그이다.

main {
	width: 20px;
	height: 20px;
	position: relative;    
}

span {
	width: 10px;
    height: 30px;
}

div {
	width: 10px;
	height: 10px;
	position: absolute;
	top: 20px;
}

div태그에 포지션 absolute가 있는데 absolute는 relative를 기준으로 위치를 정하기 때문에 부모태그 => 조상태그 순서로 relative를 찾는다.
위의 css에서는 main 태그에 relative가 있기 때문에 main태그를 기준으로 top:20px만큼 내려온다.

fixed position

fixed position은 뷰포트를 기준으로 위치를 설정한다.
이는 내가 보는 디바이스(모니터, 스마트폰 화면, 태플릿 화면 등)의 화면이 기준이 되며, 다른 포지션과는 다른 특징으로 화면에 고정되어 이동하더라도 계속 화면에 보여지게 된다.