relative 포지션

원래 있던 위치를 기준으로 한다.

 

공간을 준다고 하면

position:relative;
top: 30px; 

하게 되면 포지션을 적용한 태그기준으로 
탑에 여백30px이 생기면서

포지션을 적용한 태그는 아래로 내려가는 효과를 갖는다.

margin-top:30px;이랑 얼핏 비슷하다. 

차이점이 있다면 마진은 여백을 주는 과정에서

다른 내용들의 위치까지 영향을 주지만

 

relative포지션은 적용한 태그 이외에

다른 태그들의 위치에 영향을 주지않는다.

 

한마디로,

포지션은 적용된 태그만 움직이게 되고
주변 글자들은 움직이지않고 제자리에 있다.

 

relative를 써서 움직이게 되면 전에 있던 자리는 공백처리된다.

요소들이 겹치는 레이아웃을 할때 사용하면 유용하다.