IROUL
회원가입로그인
뒤로가기
CSS 유틸리티

[CSS Anchor Positioning] JS 없이 팝오버를 기준에 붙이고 화면 끝에서 자동으로 뒤집기

anchor-name / anchor() / position-try-fallbacks로 위치 계산 라이브러리 없이 툴팁/팝오버 만들기

CSS Anchor Positioninganchor-nameanchor()position-try-fallbacksHTML popover
라이브 데모
새 탭에서 열기
데모 불러오는 중…

제작 과정

한 줄 요약 - 버튼 같은 기준 요소에 팝오버를 CSS만으로 딱 붙이고, 화면 끝에 닿으면 자동으로 반대편으로 뒤집습니다. JS 위치 계산이 필요 없어요.

이럴 때 필요해요

드롭다운/툴팁/메뉴를 버튼 바로 아래에 붙이고 싶은데 화면 가장자리에선 잘리곤 하죠. 그동안은 Floating UI 같은 JS 라이브러리로 위치를 계산했는데, 이제 CSS가 그 일을 대신합니다.

어떻게 동작하나

  1. 기준이 될 요소에 이름을 붙입니다. anchor-name: --ap

  2. 팝오버가 그 이름을 가리키고(position-anchor: --ap) anchor() 로 변을 맞춥니다. top: anchor(bottom) 은 내 위변을 기준의 아래변에 맞춰라 = 기준 아래에 뜸.

  3. position-try-fallbacks: flip-block 을 주면 화면을 넘칠 때 자동으로 위/아래(또는 좌/우)를 뒤집어 안 잘리게 합니다.

핵심은 이거예요

위치를 px로 계산하는 게 아니라 어느 변에 맞출지를 선언하고, 넘치면 브라우저가 알아서 뒤집습니다. 그래서 측정/리렌더 코드가 0입니다.

놓치기 쉬운 것

  • flip 기준은 보통 뷰포트입니다. 데모에서 버튼을 아래로 옮기고 방향을 아래로 두면 뒤집히는 걸 볼 수 있어요.

  • 브라우저 지원: Chrome 125+, Firefox, Safari 26+ 등. @supports not (anchor-name: --x) 로 폴백을 두세요.

  • hover 툴팁의 지연 표시 같은 타이밍 로직은 여전히 약간의 JS가 필요할 수 있습니다.

이런 곳에 써요

  • 드롭다운 메뉴/셀렉트/컨텍스트 메뉴

  • 툴팁/팝오버/온보딩 코치마크

소스 코드

· 데모 페이지에서 자동 추출
import type { Metadata } from "next";
import { AnchorPositioningDemo } from "./-components/AnchorPositioningDemo";

export const metadata: Metadata = {
  title: "CSS Anchor Positioning (데모)",
  description:
    "JavaScript 위치 계산 없이 CSS만으로 툴팁/팝오버를 기준 요소에 붙이고, 화면 끝에서 자동으로 뒤집는 anchor-name / anchor() / position-try-fallbacks 데모.",
  robots: { index: false, follow: false },
};

export default function Page() {
  // data-demo-embed-fixed="560" — 임베드 iframe 높이 고정.
  // 뷰포트(iframe) 가장자리 기준으로 flip이 일어나는 걸 보여줘야 해서 고정 높이가 필요하다.
  return (
    <main
      data-demo-embed-fixed="560"
      className="relative min-h-[100dvh] overflow-hidden bg-gradient-to-b from-slate-50 to-white"
    >
      <AnchorPositioningDemo />
    </main>
  );
}
31조회수

댓글