[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(왼쪽) 속성을 사용해 위치 조절이 가능합니다.

 

 

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

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

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

 

🔹 absolute

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

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

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

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

 

 

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 속성이 필수 입니다.

 

 

결과를 보면, 

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

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

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

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

 

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