(CSS) position의 속성 - reletive, absolute이란?

 

 

position은 문서상에 요소를 배치하는 방법을 결정한다. 

 

또한 top, bottom, left, right를 추가적으로 사용하여 요소의 위치를 결정할 수 있다. 

 

position에는 5가지 속성이 있다. 

• static(기본값) 
• relative : 자기 자신을 기준으로 이동
• absolute : 가장 가까운 부모를 기준으로 이동
• sticky : 위치 고정 (부모 영향을 받음)
• fixed : 위치 고정 (부모 영향을 받지 않음)

 

이 중 fixed와 sticky는 아래 포스팅에서 다루었고, 이번 포스팅에서는 relative와 absolute를 다룬다. 

(CSS) fixed와 sticky 차이, 화면에 요소 고정하기

 

 

position : relative;

요소를 일반적으로 배치하고 나서, 자기 자신을 기준으로 top, right, bottom, left의 값에 따라 이동시킨다. 

 

relative가 적용된 div2는 기존 위치에서 이동한 것을 볼 수 있다.

 

다만 다른 요소에 영향을 주지 않는다.

 

See the Pen example-relative by 김다영 (@xnpzlttb-the-solid) on CodePen.

 

 

position : absolute;

absolute 요소는 일반적으로 배치되지 않고, 가장 가까운 부모 요소에 대해 상대적으로 배치된다. 

 

실제로 absolute가 적용된 div2를 제외한 나머지 요소가 일반적으로 배치된 것을 볼 수 있다. 

 

이때 부모는 reletive를 적용해야 한다. 부모의 위치를 기준으로 삼으려면 부모에 위치가 있어야 하기 때문이다.

 

See the Pen example-absolute by 김다영 (@xnpzlttb-the-solid) on CodePen.

 

 

아래 예시에서 부모를 기준으로 배치되는 absolute 요소를 확인할 수 있다. 

 

See the Pen example-absolute by 김다영 (@xnpzlttb-the-solid) on CodePen.