[CSS 기초] 포지셔닝 : position (position: relative vs position: absolute / position: fixed vs position: sticky)

 

오늘은 position 속성에 대해 알아보겠습니다.

position 속성은 문서 상에 요소를 배치하는 방법을 지정합니다.

🔷 position 속성 값

• static (default)
• relative
• absolute
• fixed
• sticky

🔹 static

요소를 일반적인 문서 흐름 대로 배치합니다. (왼쪽에서 오른쪽, 위에서 아래로)

모든 태그들은 기본적으로 position: static 상태입니다.

position을 해제할 때도 사용합니다.

 

🔹 relative

자신의 기존 위치(static이었을 때 위치)를 기준으로 이동합니다.

top(위), right(오른쪽), bottom(아래), left(왼쪽) 속성을 사용해 위치 조절이 가능합니다.

 

See the Pen Relative by k (@kjwboa) on CodePen.

 

예시를 보면 기존 위치에서 이동한 것을 볼 수 있습니다.

top: 10px은 top에서 10px 떨어진 것으로 위치 속성을 사용하는 것은 지정한 방향의 안쪽으로 이동합니다.

바깥쪽으로 이동하고 싶다면 -10px 같은 음수를 사용하면 됩니다.

 

🔹 absolute

absolute는 position: static 속성을 가지지 않은 부모를 기준으로 움직입니다.

부모 중 position: relative, absolute, fixed인 태그가 없다면 가장 상위 태그(body)가 기준이 됩니다.

해당 속성을 가지는 요소는 일반적인 문서 흐름에서 배제됩니다.

top(위), right(오른쪽), bottom(아래), left(왼쪽) 속성을 사용해 위치 조절이 가능합니다.

 

See the Pen Absolute by k (@kjwboa) on CodePen.

 

position: relative를 준 .conainer를 기준으로 요소들이 배치됩니다.

top: 10px은 conainer의 top에서 10px 떨어져있고

left: 30px은 conainer의 left에서 30px 떨어져있습니다.

 

🔹 fixed

스크롤을 내려도 view port에 고정되도록 합니다. (ex. 스크롤시 따라오는 메뉴)

absolute와 마찬가지로 일반적인 문서 흐름에서 배제됩니다.

 

🔹 sticky

스크롤을 따라 움직이다가 내가 정한 offset에 닿으면 그 순간 fixed 처럼 고정됩니다.

top, right, bottom, left 속성이 필수 입니다.

 

See the Pen position: fixed, sticky, absolute, relative by k (@kjwboa) on CodePen.

 

결과를 보면, 

fixed는 처음부터 view port의 지정된 위치에서 계속 고정되며

sticky는 스크롤을 내려 스크롤이 지정한 위치에 도달하면 fixed처럼 고정됩니다.

absolute는 position: static이 아닌 부모 요소를 기준으로 배치되는데, section에 relative를 지정하지 않았기 때문에 body를 기준으로 배치되었습니다.

relative는 원래 자신의 자리를 기준으로 배치되었습니다.

 

❗ position: absolute, positon: fixed를 주게 되면 블록 요소든, 인라인 요소든 인라인 성질을 가지게 되어 너비값이 줄어들게 됩니다. 너비값을 설정해주세요.