CSS 앵커 위치 지정: JavaScript가 없는 도구 설명 및 드롭다운
JavaScript로 툴팁을 작성한다는 것은 위치를 계산하는 코드를 작성하는 것을 의미합니다. 트리거를 기준으로 요소의 크기 조정 및 스크롤 시 해당 위치를 업데이트합니다. 툴팁이 뷰포트 외부에 있을 때 극단적인 경우를 처리하고 모든 작업을 수행합니다. 레이아웃 스래싱을 도입하지 않고. 복잡하지는 않지만 매번 반복되는 코드입니다. 애플리케이션을 처음부터 다시 만듭니다.
La CSS 앵커 위치 지정 API 순수한 CSS로 이 문제를 해결하고 선언적. 브라우저 지원2026년 초까지 전 세계 86% (Chrome 125+, Edge 125+, Android용 Chrome, Safari 기술 미리보기), 이 기술은 최신 브라우저를 지원하는 사이트에서의 제작에 적합합니다. 허용 위치 지정을 위한 참조점으로 한 요소를 다른 요소에 "고정"합니다. 공간이 충분하지 않은 경우 자동 대체 기능을 사용합니다.
무엇을 배울 것인가
- CSS 앵커 위치 지정의 기본 개념: 앵커, 위치 지정 요소
- 속성
anchor-nameeposition-anchor - 기능
anchor()상대 위치 지정을 위해 - 순수 CSS로 툴팁, 드롭다운, 컨텍스트 메뉴를 구현하는 방법
- 자동 대체
position-try-fallbacks - 완전한 접근성을 위해 Popover API와 통합하는 방법
- 지원되지 않는 브라우저에 대한 점진적인 개선
기본 개념
CSS 앵커 위치 지정에는 두 가지 역할이 도입됩니다.
-
L'앵커 요소 (앵커 요소): 앵커할 요소입니다.
그 사람이 재산을 받음
anchor-name맞춤 식별자 값 포함 (접두사--). -
Il 위치 지정 요소 (positioned element): 우리가 원하는 요소
앵커를 기준으로 한 위치입니다. 있어야 한다
position: absoluteoposition: fixed, 수신position-anchor앵커에 연결합니다.
/* 1. Definisci l'ancora */
.button-trigger {
anchor-name: --tooltip-anchor;
}
/* 2. Posiziona l'elemento relativamente all'ancora */
.tooltip {
position: absolute;
/* Collega questo elemento all'ancora */
position-anchor: --tooltip-anchor;
/* Posizionamento usando la funzione anchor() */
/* anchor(bottom) = il bordo bottom dell'ancora */
top: calc(anchor(bottom) + 8px);
/* Centra orizzontalmente rispetto all'ancora */
left: anchor(center);
transform: translateX(-50%);
}앵커() 함수
기능 anchor() 가장자리를 기준으로 한 좌표로 해석됩니다.
지정된 요소 앵커. 사용 가능한 값은 다음과 같습니다.
anchor(top): 앵커의 상단 가장자리anchor(bottom): 앵커의 하단 가장자리anchor(left): 앵커의 왼쪽 가장자리anchor(right): 앵커의 오른쪽 가장자리anchor(center): 앵커의 수평 중심anchor(middle): 앵커의 수직 중심anchor(self-start),anchor(self-end): 텍스트의 방향과 관련됨
/* Tooltip sopra il trigger */
.tooltip-top {
position: absolute;
position-anchor: --my-anchor;
bottom: calc(anchor(top) - 8px);
left: anchor(center);
transform: translateX(-50%);
}
/* Tooltip a destra del trigger */
.tooltip-right {
position: absolute;
position-anchor: --my-anchor;
top: anchor(center);
left: calc(anchor(right) + 8px);
transform: translateY(-50%);
}
/* Dropdown sotto il trigger - allineato a sinistra */
.dropdown {
position: absolute;
position-anchor: --dropdown-anchor;
top: calc(anchor(bottom) + 4px);
left: anchor(left);
min-width: anchor-size(width); /* larghezza minima = larghezza dell'ancora */
}앵커 크기(): 앵커를 기준으로 한 크기
기능 외에도 anchor() 좌표의 경우, anchor-size()
요소의 크기에 다시 액세스할 수 있습니다.
/* Il dropdown ha la stessa larghezza del trigger */
.dropdown {
min-width: anchor-size(width);
/* Altezza massima pari al 50% dell'altezza dell'ancora */
max-height: calc(anchor-size(height) * 0.5);
}접근 가능한 도구 설명: CSS Anchor + Popover API
2026년에 접근 가능한 툴팁과 CSS 앵커 포지셔닝의 최적 조합 Popover API를 사용하여 Popover API는 자동으로 포커스 관리를 처리합니다. 닫을 수 있는 외부 클릭 및 ARIA 접근성. CSS 앵커 위치 지정 시각적 위치를 관리합니다.
<!-- HTML: Popover API + Anchor Positioning -->
<button
popovertarget="tooltip-content"
class="btn-with-tooltip"
>
Hover per info
</button>
<div
id="tooltip-content"
popover="hint"
class="tooltip"
role="tooltip"
>
Informazione contestuale utile all'utente
</div>/* CSS: Anchor + Popover */
.btn-with-tooltip {
anchor-name: --btn-anchor;
}
.tooltip {
/* Stili base del tooltip */
position: absolute;
position-anchor: --btn-anchor;
/* Posiziona sotto il pulsante */
top: calc(anchor(bottom) + 8px);
left: anchor(center);
transform: translateX(-50%);
/* Reset stili popover */
margin: 0;
border: 1px solid #e2e8f0;
border-radius: 6px;
padding: 8px 12px;
background: white;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
font-size: 0.875rem;
max-width: 280px;
width: max-content;
/* Animazione di entrata */
opacity: 0;
transition: opacity 0.15s ease;
/* Stato visibile (Popover API) */
&:popover-open {
opacity: 1;
}
}
/* Freccia del tooltip */
.tooltip::before {
content: '';
position: absolute;
top: -8px;
left: 50%;
transform: translateX(-50%);
border: 4px solid transparent;
border-bottom-color: #e2e8f0;
}
.tooltip::after {
content: '';
position: absolute;
top: -7px;
left: 50%;
transform: translateX(-50%);
border: 4px solid transparent;
border-bottom-color: white;
}드롭다운 전체 메뉴
더 완전한 예: CSS 앵커가 있는 "작업" 버튼의 드롭다운 메뉴 액세스 가능한 포커스 관리를 위한 위치 지정 및 팝오버 API:
<!-- Bottone trigger -->
<button
class="actions-btn"
popovertarget="actions-menu"
aria-haspopup="true"
>
Azioni ▼
</button>
<!-- Menu dropdown -->
<menu
id="actions-menu"
popover="auto"
class="dropdown-menu"
>
<li><button>Modifica</button></li>
<li><button>Duplica</button></li>
<li class="separator"></li>
<li><button class="danger">Elimina</button></li>
</menu>/* CSS del dropdown */
.actions-btn {
anchor-name: --actions-anchor;
}
.dropdown-menu {
position: absolute;
position-anchor: --actions-anchor;
/* Allinea il bordo sinistro del menu con il pulsante */
top: calc(anchor(bottom) + 4px);
left: anchor(left);
/* Larghezza minima pari al pulsante */
min-width: anchor-size(width);
/* Reset stili menu */
margin: 0;
padding: 4px 0;
list-style: none;
background: white;
border: 1px solid #e2e8f0;
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
/* Animazione */
opacity: 0;
scale: 0.95;
transform-origin: top left;
transition: opacity 0.15s, scale 0.15s;
&:popover-open {
opacity: 1;
scale: 1;
}
}
.dropdown-menu li button {
display: block;
width: 100%;
padding: 8px 16px;
text-align: left;
border: none;
background: none;
cursor: pointer;
font-size: 0.875rem;
&:hover {
background: #f8fafc;
}
&.danger {
color: #ef4444;
}
}
.dropdown-menu .separator {
height: 1px;
background: #e2e8f0;
margin: 4px 0;
}위치 시도 대체를 통한 자동 대체
툴팁 및 드롭다운과 관련된 가장 지루한 문제 중 하나는 다음과 같은 경우를 처리하는 것입니다. 공간이 충분하지 않습니다. 툴팁이 상단 뷰포트 외부에 표시되거나 왼쪽은 자동으로 재배치되어야 합니다.
CSS 앵커 위치 지정은 이 문제를 다음과 같이 해결합니다. position-try-fallbacks, 그
브라우저가 순차적으로 테스트하는 대체 게재위치 목록을 지정합니다.
/* Definisci i posizionamenti alternativi */
@position-try --below {
top: calc(anchor(bottom) + 8px);
bottom: auto;
left: anchor(center);
right: auto;
}
@position-try --above {
top: auto;
bottom: calc(anchor(top) + 8px);
left: anchor(center);
right: auto;
}
@position-try --right {
top: anchor(center);
left: calc(anchor(right) + 8px);
right: auto;
bottom: auto;
}
@position-try --left {
top: anchor(center);
right: calc(anchor(left) + 8px);
left: auto;
bottom: auto;
}
.tooltip {
position: absolute;
position-anchor: --my-anchor;
/* Posizionamento default: sotto */
top: calc(anchor(bottom) + 8px);
left: anchor(center);
transform: translateX(-50%);
/* Fallback: prova prima sopra, poi destra, poi sinistra */
position-try-fallbacks: --above, --right, --left;
/* Fallback finale: usa la prima opzione disponibile nel viewport */
position-try-order: most-block-size;
}지원되지 않는 브라우저에 대한 점진적인 향상
아직 CSS 앵커 위치 지정을 지원하지 않는 브라우저의 경우(Firefox stable
2026년 초 현재 아직 지원하지 않음), @supports 에 대한
대체 제공:
/* Fallback: tooltip sempre visibile o con JS */
.tooltip {
/* Stili di default accessibili: mostro un title attribute */
display: none; /* nascosto, gestito da JS fallback */
}
/* Se il browser supporta anchor positioning: CSS puro */
@supports (anchor-name: --test) {
.trigger {
anchor-name: --my-anchor;
}
.tooltip {
display: block; /* visibile, gestito da CSS */
position: absolute;
position-anchor: --my-anchor;
top: calc(anchor(bottom) + 8px);
left: anchor(center);
transform: translateX(-50%);
/* Nascosto di default, mostrato su hover/focus */
opacity: 0;
pointer-events: none;
transition: opacity 0.15s;
}
.trigger:hover + .tooltip,
.trigger:focus + .tooltip {
opacity: 1;
pointer-events: auto;
}
}
/* JavaScript fallback per browser legacy */
if (!CSS.supports('anchor-name', '--test')) {
// Import libreria JS per tooltip
import('./tooltip-fallback.js').then(module => module.init());
}Firefox: 여전히 제한된 지원
2026년 초 현재 Firefox는 아직 CSS 앵커 위치 지정을 지원하지 않습니다.
안정적인 버전(그리고 현재 개발 중). 즉, 20~25%의
Firefox의 데스크톱 사용자에게는 대체가 표시됩니다. 미국 @supports 에 대한
앵커 위치 지정 없이도 경험이 항상 작동하는지 확인하십시오.
다음 단계
이제 순수 CSS에 도구 설명과 선언적 드롭다운이 있습니다. 다음 기사 시리즈에서는 View Transitions API: 부드러운 애니메이션을 구현하는 방법을 살펴봅니다. 단일 페이지 애플리케이션과 브라우저의 기본 탐색 타사 라이브러리가 없는 다중 페이지 애플리케이션.
결론
CSS 앵커 위치 지정은 CSS 언어에 가장 기대되는 추가 기능 중 하나입니다. 최근 몇 년. JavaScript 코드의 전체 범주를 제거합니다 — 수동 계산 위치 지정 좌표 - 이를 선언적 CSS로 대체합니다. 브라우저는 자동 대체 및 업데이트를 포함하여 기본적으로 처리합니다. 스크롤하고 크기를 조정합니다.
글로벌 브라우저의 86%를 지원하므로 이미 이를 향상된 기능으로 채택할 수 있습니다. 점진적으로 레거시 브라우저에도 여전히 경험이 있도록 보장 기능적. 접근성 관리를 위한 Popover API와의 결합 2026년 UI 오버레이 구축을 위한 현대적이고 완전한 스택을 나타냅니다.