Reference/At-rules/@position-try

김동현·2026년 3월 28일

CSS docs

mdn 학습 번역 - CSS

목록 보기

182/190

@position-try

Baseline 2026 | Newly available

Chrome, Edge, Firefox, Safari에서 지원돼요.

2026년 1월부터 이 기능은 최신 기기와 브라우저 버전에서 작동해요. 이 기능은 구형 기기나 브라우저에서는 작동하지 않을 수 있어요.

@position-try CSS at-rule은 사용자 정의 위치 시도 폴백 옵션을 정의하는 데 사용돼요. 이 옵션은 앵커 위치 지정 요소의 포지셔닝과 정렬을 정의하는 데 사용할 수 있어요. 하나 이상의 위치 시도 폴백 옵션 세트를 position-try-fallbacks 프로퍼티나 position-try 단축 속성을 통해 앵커된 요소에 적용할 수 있어요. 위치 지정된 요소가 컨테이닝 블록이나 뷰포트를 넘치기 시작하는 위치로 이동하면, 브라우저는 위치 지정된 요소를 완전히 화면 안으로 다시 배치하는 첫 번째 위치 시도 폴백 옵션을 선택할 거예요.

각 위치 옵션은 <dashed-ident>로 이름이 지정되고, 인셋 위치, 마진, 크기 조정, 셀프 정렬과 같은 정보를 정의하는 선언을 지정하는 디스크립터 목록을 포함해요. <dashed-ident>는 position-try-fallbacks 프로퍼티와 position-try 단축 속성에서 사용자 정의 위치 옵션을 참조하는 데 사용돼요.

앵커 기능과 위치 시도 폴백 사용법에 대한 자세한 정보는 CSS 앵커 포지셔닝 모듈과 오버플로우를 위한 폴백 옵션과 조건부 숨김 가이드를 참고하세요.

웹 UI를 만들다 보면 툴팁이나 팝업이 화면 끝에 걸려서 잘리는 경우가 종종 있죠? 예전에는 이걸 자바스크립트로 일일이 계산해서 위치를 옮겨줬어야 했는데, 이제 CSS만으로도 "여기 자리가 없으면 저기로 옮겨봐!"라고 말할 수 있게 됐어요. 그 핵심 설정이 바로 이 규칙이랍니다. 자, 꼼꼼하게 번역해 드릴게요!

구문 (Syntax)

@position-try --try-option-name {
  descriptor-list
}

참고: --try-option-name은 사용자가 직접 정의하는 이름(<dashed-ident>)이에요. 이 이름을 지어준 뒤에, 실제 요소를 배치할 때 position-try-fallbacks 목록에 넣어서 "이 위치도 한번 시도해봐"라고 알려주는 용도로 쓴답니다.

디스크립터 (Descriptors)

디스크립터는 커스텀 위치 옵션의 동작을 정의하는 속성값들이에요. 즉, 위치 지정 요소가 실제로 어디에 놓이게 될지를 결정하는 설정들이죠.

position-anchor

위치 지정 요소가 묶여 있을(tethered) 기준 요소를 지정해요. 기준이 되는 요소의 anchor-name 속성값과 동일한 이름을 지정하면 됩니다.

position-area

기준 요소(anchor)를 기준으로 위치 지정 요소가 놓일 영역을 정의해요.

인셋 속성 (Inset property) 디스크립터

기준 요소의 가장자리를 기준으로 위치 지정 요소의 가장자리 위치를 정의하는 anchor() 함수 값을 지정해요. 다음과 같은 속성들을 설정할 수 있습니다.

마진 속성 (Margin property) 디스크립터

위치 지정 요소에 설정될 마진(여백)을 지정해요. 다음과 같은 속성들을 설정할 수 있습니다.

크기 속성 (Sizing property) 디스크립터

기준 요소의 크기를 바탕으로 위치 지정 요소의 크기를 정의하는 anchor-size() 함수 값을 지정해요. 다음과 같은 속성들을 설정할 수 있습니다.

자기 정렬 속성 (Self-alignment property) 디스크립터

블록 또는 인라인 방향에서 기준 요소의 중심을 기준으로 위치 지정 요소를 정렬하기 위해 anchor-center 값을 지정해요. align-self와 justify-self 속성 디스크립터에서 anchor-center 값을 사용할 수 있습니다.

참고: 요소에 커스텀 위치 옵션이 적용되면, @position-try 앳 규칙 디스크립터에 정의된 속성값들이 일반적인 CSS 속성을 통해 요소에 설정된 값보다 우선적으로 적용됩니다.

형식적인 구문 (Formal syntax)

@position-try = 
  @position-try <dashed-ident> { <declaration-list> }

이 구문은 CSS Anchor Positioning Module Level 1의 최신 표준을 반영하고 있어요. 모든 브라우저가 모든 부분을 구현한 것은 아닐 수 있으니 지원 정보를 꼭 확인하세요.

예제 (Examples)

커스텀 위치 옵션 사용하기 (Custom position option usage)

이 예제에서는 기준 요소(anchor)와 그에 따라 위치가 결정되는 요소(positioned element)를 정의하고, 네 개의 이름을 가진 커스텀 위치 옵션을 만들어 볼 거예요. 이 옵션들을 위치 지정 요소에 적용해서, 기준 요소가 뷰포트 안 어디에 있든 상관없이 그 내용이 항상 보이도록 할 수 있답니다.

HTML

기준 요소가 될 div와 위치를 잡을 div 두 개를 만듭니다.

<div class="anchor">⚓︎</div>

<div class="infobox">
  <p>이것은 정보 상자입니다.</p>
</div>

CSS

먼저 <body> 요소를 아주 크게 만들어서, 기준 요소와 위치 지정 요소를 뷰포트 안에서 가로세로로 마음껏 스크롤할 수 있게 할게요.

body {
  width: 1500px;
  height: 500px;
}

.anchor {
  font-size: 1.8rem;
  color: white;
  text-shadow: 1px 1px 1px black;
  background-color: hsl(240 100% 75%);
  width: fit-content;
  border-radius: 10px;
  border: 1px solid black;
  padding: 3px;
}

이제 기준 요소에 anchor-name을 지어주고 position: absolute를 줍니다. 그리고 처음 화면이 렌더링될 때 뷰포트 중앙 근처에 오도록 top과 left 값을 줄게요.

.anchor {
  anchor-name: --my-anchor;
  position: absolute;
  top: 100px;
  left: 350px;
}

.infobox {
  color: darkblue;
  background-color: azure;
  border: 1px solid #dddddd;
  padding: 10px;
  border-radius: 10px;
  font-size: 1rem;
}

다음으로, @position-try 규칙을 사용해서 네 개의 커스텀 위치 옵션을 정의합니다. 각 옵션에는 목적을 잘 나타내는 이름을 붙여줄 거예요. 각 옵션은 기준 요소 주변의 특정 위치에 정보 상자를 배치하고, 10px의 적절한 여백을 줍니다. 다양한 기법을 보여드리기 위해 여러 방식으로 구성했어요.

첫 번째와 마지막 옵션은 position-area를 사용합니다.
두 번째 옵션은 anchor() 값을 가진 top과 인라인 방향 중앙 정렬을 위한 justify-self: anchor-center를 사용합니다.
세 번째 옵션은 anchor() 값을 가진 left를 사용하는데, 이번에는 margin 대신 calc() 함수 안에 넣어 여백 10px을 더해줍니다. 그리고 블록 방향 중앙 정렬을 위해 align-self: anchor-center를 씁니다.

마지막으로, 왼쪽과 오른쪽 위치 옵션에는 더 좁은 width를 줄게요.

@position-try --custom-left {
  position-area: left;
  width: 100px;
  margin-right: 10px;
}

@position-try --custom-bottom {
  top: anchor(bottom);
  justify-self: anchor-center;
  margin-top: 10px;
  position-area: none;
}

@position-try --custom-right {
  left: calc(anchor(right) + 10px);
  align-self: anchor-center;
  width: 100px;
  position-area: none;
}

@position-try --custom-bottom-right {
  position-area: bottom right;
  margin: 10px 0 0 10px;
}

정보 상자(infobox)에는 position: fixed를 주고, position-anchor로 기준 요소와 연결합니다. 기본 위치는 position-area: top으로 해서 기준 요소 위쪽에 붙게 할게요. 그리고 position-try-fallbacks 속성에 우리가 만든 커스텀 옵션들을 적어줍니다. 이렇게 하면 기준 요소가 화면 가장자리에 가까워져서 상자가 가려질 것 같을 때, 브라우저가 알아서 대안들을 시도해 봅니다.

.infobox {
  position: fixed;
  position-anchor: --my-anchor;
  position-area: top;
  width: 200px;
  margin-bottom: 10px;
  position-try-fallbacks:
    --custom-left, --custom-bottom, --custom-right, --custom-bottom-right;
}

결과 (Result)

페이지를 스크롤해 보세요! 기준 요소가 화면 구석으로 갈 때마다 정보 상자가 미리 정해둔 대안 위치로 슉슉 바뀌는 걸 볼 수 있을 거예요.

이 옵션들이 어떻게 작동하는지 다시 한번 짚어볼까요?

기본 위치: 처음에는 position-area: top이 기본이에요. 화면 밖으로 넘치지 않는다면 상자는 기준 요소 위에 있고, 다른 대안 위치들은 무시됩니다.
넘칠 때 시도 1: 상자가 화면 위를 벗어나려고 하면, 브라우저는 먼저 --custom-left를 시도해요. 왼쪽 영역으로 옮기고, 너비를 100px로 줄이죠.
넘칠 때 시도 2: 그것도 안 되면 --custom-bottom을 시도해서 상자를 기준 요소 아래로 보냅니다. 이때는 width 설정이 따로 없어서 다시 기본값인 200px로 돌아와요.
넘칠 때 시도 3: 그다음은 --custom-right입니다. calc()를 써서 오른쪽으로 보내고 다시 너비를 줄여보죠.
마지막 수단: 다 실패하면 --custom-bottom-right를 시도해서 오른쪽 하단 대각선 방향에 배치합니다.

중요한 팁 하나! --custom-bottom이나 --custom-right처럼 인셋 속성(top, left 등)과 *-self: anchor-center를 직접 써서 위치를 잡을 때는, 반드시 position-area: none을 해줘야 해요. 안 그러면 기본값으로 설정해둔 position-area: top이 계속 살아있어서 위치 계산이 꼬일 수 있거든요.

공식문서에 대한 추가적 설명

기존에 툴팁이나 팝업 메뉴 만들 때, 화면 끝에 닿아서 잘리는 문제 때문에 자바스크립트로 getBoundingClientRect() 써가며 창 크기 계산하고, 스크롤 이벤트 달아서 위치 옮겨주던 그 지옥 같은 경험... 다들 있으시죠? 이제 그 계산을 CSS가 알아서 해줍니다!

아주 쉬운 비유와 실전 예시로 완벽하게 쪼개서 설명해 드릴게요.

1. 한 줄 요약: "내비게이션의 경로 재탐색(플랜 B, 플랜 C)"

@position-try는 한마디로 "원래 위치에 자리가 없으면, 미리 정해둔 다른 자리로 도망가라!"라고 지시하는 플랜 B, 플랜 C를 만드는 규칙입니다.

2. 우리가 직면한 문제 상황

화면 중간에 있는 버튼(앵커) 위에 툴팁을 띄웠다고 가정해 봅시다.
기본 설정은 "버튼 위(top)"입니다.

그런데 사용자가 스크롤을 내려서 버튼이 화면 맨 위쪽 끝에 아슬아슬하게 걸쳐 있다면?
툴팁은 화면 밖으로 삐져나가서 글씨가 잘려 보이겠죠.

3. 해결책: `@position-try`로 대피소(플랜 B) 만들기

이럴 때를 대비해서 대피소를 만들어 둡니다.

/* 플랜 B: 위쪽에 자리가 없으면 아래쪽(bottom)으로 가라! */
@position-try --move-bottom {
  position-area: bottom;
}

/* 플랜 C: 아래쪽도 자리가 없으면 오른쪽(right)으로 가라! */
@position-try --move-right {
  position-area: right;
}

주의점: --move-bottom처럼 이름 앞에는 무조건 대시 두 개(--)를 붙여서 우리만의 커스텀 이름을 지어줘야 합니다.

4. 실전 적용하기 (전체 코드 흐름)

자, 이제 버튼(앵커)과 툴팁을 연결하고, 우리가 만든 대피소(플랜 B, C)를 적용해 보겠습니다.

HTML

<button class="my-btn">버튼입니다</button>

<div class="my-tooltip">
  툴팁 내용입니다. 버튼 위에 뜹니다.
</div>

CSS

/* 1. 버튼을 '앵커(닻)'로 지정합니다 */
.my-btn {
  /* 이 버튼의 이름표를 달아줍니다 */
  anchor-name: --btn-anchor; 
}

/* 2. 대피소(플랜 B, C)를 만들어 둡니다 */
@position-try --fallback-bottom {
  position-area: bottom;
}

@position-try --fallback-right {
  position-area: right;
  /* 오른쪽으로 갈 때는 모양이 안 예쁠 수 있으니, 여백도 따로 줄 수 있어요! */
  margin-left: 10px; 
}

/* 3. 툴팁에 위치와 대피소를 설정합니다 */
.my-tooltip {
  position: absolute;
  
  /* 누구한테 묶일 건지(앵커) 연결합니다 */
  position-anchor: --btn-anchor; 
  
  /* 플랜 A (기본 위치): 무조건 버튼 위쪽에 떠라! */
  position-area: top; 
  
  /* 핵심! ★★★ */
  /* 만약 플랜 A(top)대로 하려는데 화면에 잘릴 것 같으면? */
  /* 내가 적어둔 대피소를 순서대로 시도(try)해봐! */
  position-try-fallbacks: --fallback-bottom, --fallback-right;
}

5. 브라우저는 어떻게 생각하고 움직일까요?

스크롤을 움직일 때 브라우저 내부에서는 이런 계산이 실시간으로 일어납니다.

브라우저: "음, 툴팁을 띄워야 하네. 기본 위치(position-area: top)대로 버튼 위에 그려야지."
브라우저: (사용자가 스크롤을 내림) "어랏? 버튼이 화면 맨 위에 붙어서, 툴팁을 위에 그렸더니 화면 밖으로 잘리네?"
브라우저: "잠깐, position-try-fallbacks 목록이 있잖아? 첫 번째 대안인 --fallback-bottom을 시도(try)해볼까?"
브라우저: (아래쪽 공간 확인) "오, 버튼 아래쪽은 화면 공간이 넉넉하네! 그럼 툴팁을 아래쪽에 그려야겠다. 휴, 안 잘렸다!"

6. 꿀팁: 디테일한 조정이 필요할 때

가끔 단순히 position-area: bottom처럼 구역만 바꾸는 게 아니라, 위치를 아주 세밀하게 픽셀 단위로 조정하고 싶을 때가 있습니다.

@position-try --custom-fallback {
  /* 기본 위치(top) 설정을 무효화시킵니다 (매우 중요!) */
  position-area: none; 

  /* 버튼의 오른쪽 끝 가장자리에서 20px 띄운 곳에 배치해! */
  left: calc(anchor(right) + 20px);
  
  /* 세로축 중앙에 맞춰! */
  align-self: anchor-center;
}

여기서 position-area: none;을 적어주는 이유는, 기존 툴팁에 설정된 position-area: top이라는 "플랜 A"의 흔적을 싹 지워버려야 새로운 left, align-self 계산이 꼬이지 않고 완벽하게 적용되기 때문입니다.

마무리

어떠신가요? 코드가 조금 길어 보일 순 있지만, 예전에 이 똑같은 기능을 구현하기 위해 짰던 수십 줄의 더러운 자바스크립트 코드를 생각하면 눈물이 날 정도로 아름다운 CSS 기능입니다.

기본 원리: position-try-fallbacks에 대안 이름들을 나열한다.
대안 만들기: @position-try --이름 안에 위급할 때 적용할 스타일(위치, 마진, 크기 등)을 적어둔다.

이 두 가지만 기억하시면 됩니다.

김동현

프론트에_가까운_풀스택_개발자

이전 포스트

Reference/At-rules/@namespace

다음 포스트

Reference/At-rules/@position-try

mdn 학습 번역 - CSS

@position-try

구문 (Syntax)

디스크립터 (Descriptors)

형식적인 구문 (Formal syntax)

예제 (Examples)

커스텀 위치 옵션 사용하기 (Custom position option usage)

HTML

CSS

결과 (Result)

이 옵션들이 어떻게 작동하는지 다시 한번 짚어볼까요?

공식문서에 대한 추가적 설명

1. 한 줄 요약: "내비게이션의 경로 재탐색(플랜 B, 플랜 C)"

2. 우리가 직면한 문제 상황

3. 해결책: `@position-try`로 대피소(플랜 B) 만들기

4. 실전 적용하기 (전체 코드 흐름)

HTML

CSS

5. 브라우저는 어떻게 생각하고 움직일까요?

6. 꿀팁: 디테일한 조정이 필요할 때

마무리

Reference/At-rules/@namespace

Reference/At-rules/@property

0개의 댓글

Reference/At-rules/@position-try

mdn 학습 번역 - CSS

@position-try

구문 (Syntax)

디스크립터 (Descriptors)

형식적인 구문 (Formal syntax)

예제 (Examples)

커스텀 위치 옵션 사용하기 (Custom position option usage)

HTML

CSS

결과 (Result)

이 옵션들이 어떻게 작동하는지 다시 한번 짚어볼까요?

공식문서에 대한 추가적 설명

1. 한 줄 요약: "내비게이션의 경로 재탐색(플랜 B, 플랜 C)"

2. 우리가 직면한 문제 상황

3. 해결책: @position-try로 대피소(플랜 B) 만들기

4. 실전 적용하기 (전체 코드 흐름)

HTML

CSS

5. 브라우저는 어떻게 생각하고 움직일까요?

6. 꿀팁: 디테일한 조정이 필요할 때

마무리

Reference/At-rules/@namespace

Reference/At-rules/@property

0개의 댓글

3. 해결책: `@position-try`로 대피소(플랜 B) 만들기