CSS의 fixed position을 통한 HTML 요소의 위치 고정

이번 포스팅에서는 화면의 한 곳에 고정되어 있는 UI를 구현할 때 사용되는 CSS의 고정 배치(fixed positioning)에 대해서 알아보도록 하겠습니다.

Fixed Position

CSS의 고정 배치(fixed positioning)를 사용하면 브라우저의 전체 화면(viewport)을 기준으로 HTML 요소를 배치할 수 있습니다. CSS의 position 속성은 HTML 요소가 어떻게 배치되는가를 결정하는데, 이 속성의 값을 fixed로 지정해주면 고정 배치가 적용됩니다.

.fixed {
  position: fixed;
}

HTML 문서 상에서 고정 배치가 적용된 요소는 부모 요소로 부터 완전히 독립되어 다른 요소에 구애받지 않고 화면에 어디든지 원하는 위치에 배치될 수 있습니다. 또한, 고정 배치가 적용된 요소는 다른 요소들이 스크롤링(scrolling)되는 동안에도 지정된 자리에 고정되어 움직이지 않는 특징을 가지고 있습니다.

예를 들어, 아래 화면에서 하늘색 박스에는 고정 배치가 적용되어 있습니다. 스크롤링을 해보면 분홍색 박스는 상하로 움직이는 반면에 하늘색 박스는 제자리에 고정되어 있는 것을 확인할 수 있습니다.

요소 위치 지정

고정 배치가 적용된 HTML 요소의 위치를 지정할 때는 CSS의 top, left, bottom, right와 같은 offset 속성을 이용합니다. 예를 들어, top 속성을 10px로 설정하면, 해당 요소는 화면 상단에서 10px 떨어진 곳에 위치하게 됩니다.

아래 화면을 보면 첫번째 박스는 좌상단에 고정되어 있고, 두번째 박스는 우하단에 고정되어 있습니다.

첫번째 박스는 top과 left 속성을 기준으로 위치가 지정되어 있고, 두번째 박스는 bottom과 right 속성 기준으로 위치가 지정되어 있습니다.

.top-left {
  top: 10px;
  left: 10px;
}

.bottom-right {
  bottom: 10px;
  right: 10px;
}

실시간 채팅 버튼 구현

많은 웹사이트의 화면 우측 하단에서 흔히 볼 수 있는 라이브 채팅 버튼을 고정 배치를 활용해서 간단하게 구현해보겠습니다.

<button id="live-chat">실시간 채팅 💬</button>

#live-chat {
  position: fixed;
  bottom: 20px;
  right: 20px;

  border: none;
  border-radius: 16px;
  background: royalblue;
  color: white;
  padding: 12px;
  font-weight: bold;
  box-shadow: 0px 5px 15px gray;
  cursor: pointer;
}

마치면서

이 밖에도 position: fixed는 화면에 고정되야 하는 다양한 UI를 구현하는데 활용되고 있습니다. 대표적인 사례로 상단에 고정된 메뉴바를 들 수 있는데요. 이 부분은 예전에 다른 포스팅에서 다루었으니 참고 바랍니다.