[CSS] position

 

position 속성

CSS에서 position 속성은 HTML 문서 상에서 요소가 배치되는 방식을 결정합니다. 많은 경우, position 속성은 요소의 정확한 위치 지정을 위해서 top, left, bottom, right 속성과 함께 사용됩니다.

 

1. position: static

position 속성을 별도로 지정해주지 않으면 기본값인 static이 적용됩니다. position 속성이 static인 요소는 HTML 문서 상에서 원래 있어야하는 위치에 배치됩니다.

이 말은 요소들이 HTML에 작성된 순서 그대로 브라우저 화면에 표시가 된다는 것을 뜻하며, 따라서 top, left, bottom, right 속성값은 position 속성이 static일 때는 무시됩니다.

 

2. position: relative

position 속성을 relative로 설정하게 되면, 요소를 원래 위치에서 벗어나게 배치할 수 있게 됩니다. 요소를 원래 위치를 기준으로 상대적(relative)으로 배치해준다고 생각하시면 이해가 쉬울 것 같은데요. 요소의 위치 지정은 top, bottom, left, right 속성을 이용해서, 요소가 원래 위치에 있을 때의 상하좌우로 부터 얼마나 떨어지게 할지를 지정할 수 있습니다.

3. position: absolute

position 속성값 중 가장 난해하고 주의해서 사용해야하는 속성값은 absolute입니다. position 속성이 absolute일 때 해당 요소는 배치 기준을 자신이 아닌 상위 요소에서 찾습니다. 대부분의 경우, 부모 요소(가장 가까운 상위 요소)를 기준으로 top, left, bottom, right 속성을 적용합니다. 따라서 어떤 요소의 display 속성을 absolute로 설정하면, 부모 요소의 display 속성을 relative로 지정해주는 것이 관례입니다.

 

=> 이거 생각보다 많이 사용한다.

4. position: fixed

화면을 위아래로 스크롤하더라도 브라우저 화면의 특정 부분에 고정되어 움직이지 않는 UI에 사용

 

5. position: sticky

position 속성의 sticky 값은 CSS에서 비교적 최근에 추가된 속성값인데, 특이하게도 브라우저 화면을 스크롤링할 때 효과가 나타난다. 스크롤시 더 이상 올라가지 않고, 지정된 곳에 멈춘다. 쓸모가 많을 것이라 예상된다.

sticky position을 사용한 파란박스는 스크롤을 올려도 더 이상 올라가지 않는다.