CSS 앵커 포지셔닝 꿀팁, 툴팁과 드롭다운이 화면 밖으로 안 잘리게 하는 3줄

• CSS 데모로 유명한 jh3yy(Jhey Tompkins)가 소개한 팁으로, 툴팁이나 드롭다운 메뉴가 화면 끝에 닿으면 CSS가 알아서 반대쪽으로 뒤집어 줌

• 핵심은 position-try-fallbacks: flip-block, flip-inline; 한 줄. JavaScript도 라이브러리도 필요 없음

• 2026년 1월 Firefox 147을 마지막으로 Chrome, Edge, Safari, Firefox가 모두 지원함

• 스크롤하거나 창 크기가 바뀌어도 브라우저가 다시 계산해 위치를 맞춤

어떤 문제를 푸나

• 버튼 아래에 메뉴를 띄웠는데, 버튼이 화면 맨 아래에 있으면 메뉴가 잘림

• 지금까지는 JavaScript로 화면 남은 공간을 재고 위치를 바꿨음

  • Floating UI, Popper 같은 라이브러리를 이 용도로 많이 씀

• CSS 앵커 포지셔닝(Anchor Positioning)은 한 요소를 다른 요소에 붙여 두는 기능임. 붙일 기준이 되는 요소를 앵커라고 부름

• 여기에 "자리가 없으면 반대로 뒤집어"라는 규칙까지 CSS로 적을 수 있게 됨

3줄 코드

jh3yy가 올린 원본 코드는 다음과 같음.

.menu {
  top: anchor(top);
  left: anchor(right);
  position-try-fallbacks: flip-block, flip-inline;
}

한 줄씩 보면 이렇게 됨.

• top: anchor(top);: 메뉴 윗변을 앵커(버튼) 윗변 높이에 맞춤

• left: anchor(right);: 메뉴 왼쪽 변을 버튼 오른쪽 변에 붙임. 그래서 메뉴가 버튼 오른쪽에 나란히 뜸

• position-try-fallbacks: flip-block, flip-inline;: 지금 자리에서 잘리면 다른 자리를 차례로 시도함

  • flip-block: 위아래를 뒤집음. 아래가 막히면 위로 올림

  • flip-inline: 좌우를 뒤집음. 오른쪽이 막히면 왼쪽으로 보냄

• 브라우저는 적힌 순서대로 시도하고, 처음으로 안 잘리는 자리를 씀

바로 붙여 쓰는 드롭다운 예제

원본 3줄은 앵커 연결이 이미 돼 있다고 보고 줄인 코드임. 실제로 쓸 때는 버튼과 메뉴를 이어 주는 두 줄이 더 필요함. jh3yy가 2025년 10월에 다시 올린 드롭다운 예제를 바탕으로 정리함.

<button class="trigger" popovertarget="menu">메뉴</button>
<div id="menu" class="menu" popover>
  <a href="#">프로필</a>
  <a href="#">설정</a>
  <a href="#">로그아웃</a>
</div>

.trigger {
  anchor-name: --menu-btn;
}

.menu {
  position-anchor: --menu-btn;
  inset: auto;
  margin: 0;
  top: anchor(bottom);
  right: anchor(right);
  position-try-fallbacks: flip-block, flip-inline;
}

• anchor-name: --menu-btn;: 버튼에 앵커 이름을 붙임. 이름은 --로 시작해야 함

• position-anchor: --menu-btn;: 메뉴가 어느 앵커를 기준으로 할지 정함

• top: anchor(bottom);, right: anchor(right);: 버튼 바로 아래에, 오른쪽 끝을 맞춰 띄움

• popover 속성을 쓰면 클릭으로 열고 닫기, 바깥 클릭 시 닫기, 맨 위 레이어에 띄우기까지 브라우저가 해 줌. 이 예제에는 JavaScript가 한 줄도 없음

놓치기 쉬운 점

• popover 기본 스타일을 지워야 함

  • 브라우저가 popover에 inset: 0과 margin: auto를 기본으로 줘서 화면 가운데에 띄움

  • 그대로 두면 top, right만 바꿔도 메뉴가 엉뚱하게 늘어나거나 가운데로 쏠림

  • 그래서 예제에 inset: auto;와 margin: 0;을 먼저 넣음

• popover가 아니면 position: absolute나 position: fixed가 필요함

  • 앵커 포지셔닝은 절대 위치 요소에만 먹힘. popover는 기본이 fixed라 따로 안 적어도 됨

• 옛 이름 position-try-options는 쓰지 않음

  • jh3yy의 2024년 4월 트윗에는 이 이름으로 나오지만, 같은 해 7월 "속성 이름이 바뀌었다"며 position-try-fallbacks로 고쳐 다시 올림

  • 오래된 글이나 예제를 따라 할 때 이 부분만 바꿔 주면 됨

• 네 귀퉁이까지 대비하려면 조합을 하나 더 적음

  • position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;

  • 쉼표로 나눈 것은 각각 다른 후보이고, 띄어쓰기로 붙인 것은 두 가지를 한꺼번에 적용한 후보임

  • 화면 오른쪽 아래 구석처럼 위아래와 좌우가 다 막힌 경우에 씀 (위 그림의 4번)

브라우저 지원과 대체 방법

• 2026년 1월부터 Baseline(주요 브라우저 모두 지원)에 들어감

• 업데이트를 안 한 브라우저까지 챙겨야 하면 지원 여부를 먼저 확인함

  • CSS: @supports (anchor-name: --a) { .menu { position-try-fallbacks: flip-block; } }

  • JavaScript: CSS.supports('anchor-name', '--a')

• jh3yy도 데모에서 앵커 포지셔닝을 지원하지 않는 브라우저에서만 Floating UI가 돌게 해 둠

• 새로 만드는 화면이라면 CSS로 먼저 짜고, 지원하지 않는 브라우저용 대체 코드는 필요할 때만 붙이는 쪽이 간단함