position의 속성들과 각각의 특징

position 속성과 특징

position 속성은 웹 페이지 내 요소의 위치를 어떻게 결정할 것인지 정의하는 중요한 속성입니다. 이 속성은 요소의 레이아웃과 관련하여 다양한 방식으로 동작하며, 웹 페이지의 시각적 구성에 큰 영향을 미칩니다.

static

HTML 요소에서 위치를 결정하는 가장 기본적인 정적 위치(static position) 지정 방식입니다.
static으로 설정된 요소는 기본적인 코드의 흐름에 따라 위치하며 top, right, left, bottom 과 같은 위치 지정 속성들은 영향을 주지 않습니다.

 

See the Pen Untitled by 구승모 (@ejjegrbt-the-solid) on CodePen.

relative

relative는 요소를 상대적으로 위치시킵니다.
원래의 위치를 기준으로 top, right, left, bottom 속성을 사용하여 위치를 조정할 수 있습니다. 이동해도 원래 공간은 유지됩니다.

 

relative 포지셔닝의 특징

relative로 설정된 요소는 원래 있어야 할 위치에서 상대적으로 이동합니다. 이동하는 거리는 top, right, left, bottom 속성을 지정할 수 있습니다.

또한 해당 요소는 일반 코드의 순서 흐름을 유지하며, 원래 자리는 여전히 공간을 차지합니다. 즉, 요소가 이동해도 원래 있던 공간은 비워두는 형태로 남습니다.

relative로 이동한 요소는 다른 요소들 위에 겹쳐질 수 있습니다. 이것으로 레이어링(층을 이루는 것)효과를 만들 수 있으며 z-index 속성으로 레이어 순서 또한 조정할 수 있습니다.

relative 로 설정된 요소는 자식 요소가 absolute 포지셔닝 될 때 기준점 역할을 합니다.

 

 

 

See the Pen relative by 구승모 (@ejjegrbt-the-solid) on CodePen.

absolute

코드의 흐름에서 완전히 분리시켜 절대적 위치에 배치합니다.
가장 가까운 위치 지정된 조상 요소(relative, absolute, fixed, sticky)에 대해 상대적으로 위치합니다. 해당 조상이 없으면 body 태그가 기준이 됩니다.

absolute 포지셔닝의 특징

absolute 포지셔닝은 CSS의 position 속성에서 가장 독특한 동작을 하는 옵션이라고도 생각합니다. absolute로 설정된 요소는 가장 가까운 위치 지정된 조상 요소에 대해 절대적으로 위치하며 해당 조상이 없으면 body 태그가 기준이 됩니다. 

또한 absolute 요소는 일반 코드의 흐름에서 제거되며 다른 요소들은 이를 무시하고 자리를 차지합니다.

top, right, left, bottom 속성을 사용하여 위치를 조정할 수 있지만, 이는 기준이 되는 조상 요소에 대한 상대적인 위치를 의미합니다.

 

See the Pen absolute by 구승모 (@ejjegrbt-the-solid) on CodePen.

해당 예시에서 absolute-box는 relative-box 내부에 있습니다. relatvie-box는 position: relative; 로 설정되어 있기 때문에 

absolute-box는 이를 기준으로 top과 right값을 사용하여 위치가 결정됩니다. 만약 relative-box가 position: relative; 로 설정되어 있지 않다면 absolute-box는 더 상위의 조상 요소나 최종적으로는 body를 기준으로 위치하게 됩니다. 최종적으로 아래와 같이 변경됩니다.

 

See the Pen bodyabsolute by 구승모 (@ejjegrbt-the-solid) on CodePen.

이러한 absolute는 특히 팝업이나 드롭다운 메뉴, 오버레이 패널과 같은 요소를 구현할 때 매우 유용합니다.

 

fixed

요소를 뷰포트에 대해 고정시킵니다.
스크롤과 무관하게 항상 동일할 위치에 고정되어 표시됩니다.

fixed 포지셔닝의 특징

fixed로 설정된 요소는 브라우저 창(뷰포트)에 상대적으로 위치하며, 스크롤과 무관하게 항상 같은 위치에 고정됩니다. 이러한 특성은 특정 요소를 화면에 항상 보이게 유지할 필요가 있을 때 유용합니다. 즉 사용자가 스크롤을 해도 요소의 위치는 변하지 않습니다.

fixed 요소는 또한 코드의 흐름에서 완전히 제거되며, 다른 요소들은 이를 무시하고 자리를 차지합니다.

top, right, left, bottom 속성을 사용하여 위치를 조정할 수 있으며, 이는 뷰포트에 대한 상대적인 위치를 의미합니다.

주로 네비게이션 바, 고정된 버튼, footer(푸터), 광고 배너 등을 화면에 항상 보이게 하는데 사용됩니다.

 

See the Pen fixed by 구승모 (@ejjegrbt-the-solid) on CodePen.

또한 fixed 포지셔닝으로 네비게이션 바를 상단에 고정하면, 페이지의 나머지 콘텐츠는 네비게이션 바의 존재를 인식하지 못하고 마치 바가 없는 것 처럼 상단에서부터 시작하여 레이아웃이 구성됩니다. 이 때문에 네비게이션 바 아래에 있는 콘텐츠가 네비게이션 바에 가려지는 문제가 발생할 수 있습니다.

이를 해결하기 위해서는 네비게이션 바 아래에 오는 주요 콘텐츠에 마진을 추가하여 네비게이션 바 만큼의 공간을 만들어주는 것이 중요합니다. 

 

sticky

특정 위치에서 fixed 처럼 동작하는 포지셔닝입니다.
스크롤 위치에 따라 relative에서 fixed로 전환되어 특정 지점에서 화면에 고정됩니다.

 

sticky 포지셔닝의 특징

sticky 요소는 fixed와 달리 일반적인 코드의 흐름을 유지합니다. 즉 고정되지 않은 상태에서 원래 위치에 공간을 차지합니다.

또한 sticky를 사용하기 위해서는 top, right, left, right 중 하나 이상의 값이 필요합니다. 이 값은 요소가 어느 지점에 고정될지를 결정합니다.

sticky 요소는 부모 컨테이너의 경계 내에서만 고정됩니다. 컨테이너를 벗어나면 다시 원래 코드의 흐름으로 돌아갑니다.

 

See the Pen sticky by 구승모 (@ejjegrbt-the-solid) on CodePen.

이 예시에서 container는 sticky 요소의 부모 컨테이너 역할을 합니다. sticky-box는 position: sticky;와 top: 0; 으로 설정되어 있어  스크롤할 때 컨테이너 상단에 고정됩니다. 그러나 container의 경계를 벗어나게 되면 sticky-box는 다시 원래의 문서 흐름으로 돌아가고 고정 상태가 해제됩니다.

 

마무리

우리가 지금까지 살펴본 position 속성의 이해는 실제 인터넷을 사용할 때 저주 접하는 사이트들에서의 경험을 통해 더욱 명확하게 이해할 수 있습니다. 예를 들어 유튜브에서는 위,왼쪽에 위치한 사이드바와 네비게이션바가 스크롤을 해도 항상 같은 위치에 고정되어 있는 것을 볼 수 있습니다. 실제로 개발자 도구를 열어보면 fixed로 적용되어 있는 것을 볼 수 있습니다. 

position 을 통해 이러한 사례들은 더욱 심화적으로 다룰수 있으며 이를 통해 웹사이트를 만들 때도 레이아웃과 사용자 인터페이스를 설계하는데 도움이 될 것이라고 생각합니다.

 

참고문서

https://medium.com/baakademi/css-position-property-69d0596baf3c