[CSS] Fixed Positioning
Apr 3, 2021 · 2 min read



이번 포스트에서는 화면에 고정된 UI를 만들 때 사용되는 fixed positioning에 대해서 알아보도록 하겠습니다.

Fixed Positioning

CSS의 fixed positioning은 브라우저의 전체 화면(viewport)을 기준으로 엘리먼트를 배치할 때 사용합니다. CSS의 position 속성은 엘리먼트가 어떻게 배치되는가를 결정하는데, 이 속성의 값을 fixed로 지정해주면 fixed positioning이 적용됩니다.

.fixed {
  position: fixed;
}

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

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

엘리먼트 위치 지정

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

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

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

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

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

라이브 채팅 버튼 만들기

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

<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: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  cursor: pointer;
}

마치면서

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





최신 포스트


Engineering Blog  by Dale Seo