[CSS] position : fixed 속성 - 특정 위치에 요소 고정시키기

position : fixed는 문서의 흐름과 상관없이 위치로 좌표로 결정합니다. 브라우저 창(뷰포트)이 기준이 되며 브라우저 창의 왼쪽 위 꼭짓점을 원점으로 두고 좌표가 계산됩니다. 이 position : fixed 속성을 사용하면 이름처럼 브라우저 창을 스크롤하더라도 한 곳에 계속 고정되어 표시됩니다. 이를 활용하여 헤더, 사이드바, 모달 창 등을 구현할 수 있습니다.

 

position : fixed 사용법 

See the Pen position : fixed by wjdxo513 (@wjdxo513) on CodePen.

 

• top : 상단에서 픽셀만큼 요소를 아래에 고정시킵니다.
• right : 우측에서 픽셀만큼 요소를 왼쪽에 고정시킵니다.
• left : 좌측에서 픽셀만큼 요소를 오른쪽에 고정시킵니다.
• bottom : 하단에서 픽셀만큼 요소를 위쪽에 고정시킵니다.

 

위의 예제를 보시면 여러 개의 div 박스 중에 fixed_box라는 class의 div박스만 position : fixed로 설정해 두었습니다. 이 속성을 사용한 파란색 div박스는 스크롤을 내리더라도 요소가 화면에 고정되어 표시되는 것을 보실 수 있습니다.

 

 

다른 요소 위에 고정시키기

See the Pen position : fixed2 by wjdxo513 (@wjdxo513) on CodePen.

 

fixed 요소는 가장 앞쪽에 배치되는 것이 일반적이나 fixed로 설정되어 있는 html요소들이 많은 경우에는 z-index 속성을 사용하여 요소의 쌓임 순서를 지정할 수 있습니다. z-index 프로퍼티에 큰 숫자값을 지정할수록 화면 전면에 출력합니다. positon 프로퍼티가 static 이외인 요소에만 적용된다는 특징이 있습니다.

 

 

floating button 만들기

See the Pen Simple css floating button by wjdxo513 (@wjdxo513) on CodePen.

 

position:fixed를 가장 잘 활용할 수 있는 곳이 바로 floating button입니다. 많은 웹사이트에서 볼 수 있는 고정성 버튼으로 여러 가지 기능을 할 수 있도록 처리할 수 있습니다. 

 

 

position : fixed 사용 시 주의사항

• position: fixed 속성을 사용한 요소는 스크롤이 되더라도 항상 페이지의 동일한 위치에 나타나기 때문에, 요소의 크기가 너무 크면 페이지의 가독성이 떨어질 수 있습니다.
• position: fixed 속성을 사용한 요소는 브라우저의 창을 벗어나지 않기 때문에, 요소의 크기가 너무 크면 브라우저의 창을 벗어나는 요소와 겹쳐질 수 있습니다.
• position: fixed 속성을 사용한 요소는 다른 요소의 뒤로 가려지지 않기 때문에, 요소의 위치가 다른 요소의 위치와 겹치는 경우 페이지의 가독성이 떨어질 수 있습니다.