CSS anchor positioning 소개 및 활용

새로운 CSS Anchor position 속성으로 보다 더 편하게 앵커와 요소의 위치를 지정할 수 있습니다.
이 글에서는 기능 소개와 활용 예제, 다양한 fallbacks 기능을 정리하였습니다. 

• CSS anchor positioning 소개
  • anchor-name
  • position-anchor
  • position-area
  • position-visibility
• Tips
• CSS anchor positioning 활용
  • Tooltips
  • Drop-down menu
• Fallback 옵션

🔍 CSS anchor positioning이란?

기존 position 속성은 상속관계에 의한 상대적 위치를 지정하는 방식이었습니다. 따라서 직관적이지만 부모의 overflow등 속성에 의해 원하는 방식대로 사용하기 어려운 경우도 있었습니다.
CSS anchor positioning은 상속관계가 아닌 CSS 속성으로 앵커 요소를 지정한 후 그 요소를 기반으로 상대적/절대적 위치를 지정할 수 있습니다.

CSS anchor positioning 소개

anchor-name  

속성이 지정된 요소를 해당 이름의 앵커로 지정합니다.

/* 단일 값 */
anchor-name: none;
anchor-name: --name;
/* 다중 값 */
anchor-name: --name, --another-name;

position-anchor   

anchor-name으로 지정된 요소를 기준점으로 현재 요소를 연관시킵니다.

position-anchor: --name;

position-area

anchor-name으로 지정된 요소를 기준점으로 현재 요소를 위치시킵니다.
위치는 지정 요소 주변 8칸을 사용할 수 있으며, span값을 통해 확장할 수 있습니다.

/* 기본값 */
position-area: none; 


/* 단일 특정 타일을 정의하는 두 개의 <position-area> 키워드 */
position-area: top left;
position-area: start end;
position-area: block-start center;
position-area: inline-start block-end;
position-area: x-start y-end;
position-area: center y-self-end;

/* 두 개의 타일에 걸쳐 있는 두 개의 <position-area> 키워드 */
position-area: top span-left;
position-area: center span-start;
position-area: inline-start span-block-end;
position-area: y-start span-x-end;

/* 3개의 타일에 걸쳐 있는 두 개의 <position-area> 키워드 */
position-area: top span-all;
position-area: block-end span-all;
position-area: x-self-start span-all;

/* 암묵적으로 두 번째 <position-area> 키워드가 있는 하나의 <position-area> 키워드  */
position-area: top; // equiv: top span-all
position-area: inline-start; // equiv: inline-start span-all
position-area: center; // equiv: center center
position-area: span-all; // equiv: center center
position-area: end; // equiv: end end

See the Pen Almanac – position-area property – Demo by Juan Diego – Monknow (@monknow) on CodePen.

position-visibility

앵커 위치에 있는 요소를 포함하는 요소나 뷰포트를 넘치느냐에 따라 조건부로 숨길 수 있습니다.

position-visibility: always;
position-visibility: anchors-visible;
position-visibility: no-overflow;

See the Pen position-visibility by WITBLOG (@witblog) on CodePen.

Tips

기존 top/bottom/left/right 값을 relative 상위 요소가 아닌 앵커로 지정한 요소 기준으로 계산할 수 있습니다.
다만 anchor 속성 업데이트가 예정되어 현재는 위치만 키워드로 지정이 가능하고 +-로 px단위로 지정은 불가능합니다.

#tooltip {
  position: absolute;
  bottom: anchor(--button-anchor top);
}

See the Pen Anchor Positioning 1 by WITBLOG (@witblog) on CodePen.

🔍 CSS anchor positioning 활용

Tooltips

기존에 툴팁을 구현하려면 버튼이나 요소의 길이에 대한 대응을 추가해야 했는데, CSS Anchor position을 활용하면 부모 요소가 없거나 버튼의 너비에 상관없이도 위치를 지정할 수 있습니다.

See the Pen Achore position tooltip by WITBLOG (@witblog) on CodePen.

Drop-down menu

더보기 메뉴 같은 드롭다운 메뉴에서도 간단한 구현이 가능합니다. 

See the Pen Anchor position select by WITBLOG (@witblog) on CodePen.

Fallback 옵션

position-try-fallbacks

position-try-fallback 속성을 통해 fallback 스타일 규칙을 적용할 수 있습니다. 
기본으로 지정된 위치에서 공간 부족이나 뷰포트 벗어남, overflow 등의 문제로 노출이 정상적으로 되지 않을 때 두번째로 지정된 위치에서 노출되도록 합니다.

/* 기본값: 폴백 옵션을 시도하지 않음 */
position-try-fallbacks: none;


/* 단일 try 옵션 */
position-try-fallbacks: flip-block;
position-try-fallbacks: top;
position-try-fallbacks: --custom-try-option;

/* 다중 값 조합 옵션 */
position-try-fallbacks: flip-block flip-inline;

/* 다중 값 */
position-try-fallbacks: flip-block, flip-inline;
position-try-fallbacks: top, right, bottom;
position-try-fallbacks: --custom-try-option1, --custom-try-option2;
position-try-fallbacks:
  flip-block,
  flip-inline,
  flip-block flip-inline;
position-try-fallbacks:
  flip-block,
  --custom-try-option1,
  --custom-try-option2 flip-inline,
  right;

position-try-fallback 속성의 값은 try-tactic과 position-area로 이루어져 있습니다.
이 속성은 적합한 것을 찾거나 옵션이 부족할 때까지 각 fallback 값을 사용하여 자체적으로 위치를 변경하려고 시도합니다.

try-tactic

• flip-block: 블록 축을 따라 요소의 위치를 ​​뒤집습니다.
• flip-inline: 인라인 축을 따라 요소의 위치를 ​​뒤집습니다.
• flip-start: 인라인 및 블록 축 값을 모두 뒤집고, 시작 속성과 끝 속성을 서로 바꿉니다.

position-area value

position-area 구문을 사용하여 앵커를 새로운 위치로 이동합니다.

position-area에서 설명했던 position-area 값을 fallback값으로 지정할 수 있습니다.

position-try-order

position-try-order CSS 속성을 사용하면 position-try-fallbacks 속성에 정의된 fallback 값에서 대상에 가장 많은 공간을 제공하는 위치에 따라 새 위치를 선택합니다. 나머지 옵션은 가장 큰 사용 가능한 공간이 먼저 오도록 재정렬됩니다.

• most-height: 요소의 컨테이닝 블록에 가장 높은 높이를 제공하는 위치에 fallback 옵션이 적용됩니다.
• most-width: 요소의 컨테이닝 블록에 가장 높은 너비를 제공하는 위치에 fallback 옵션이 적용됩니다.
• most-block-size: 요소의 포함 블록에 블록 방향으로 가장 큰 크기를 제공하는 위치에 폴백 옵션이 적용됩니다. 
• most-inline-size: 요소의 포함 블록에 인라인 방향으로 가장 큰 크기를 제공하는 위치에 폴백 옵션이 적용됩니다. 

@position-try

이 at-rule 규칙은 position-try-fallbacks 속성에 대한 사용자 지정 위치 대체를 정의합니다.

#tooltip { 
  position: absolute;
  position-area: top right; 
  position-try: most-width, flip-inline, bottom left;
  width: 100px; 
}

위와 같은 코드를 작성했을 경우 fallback은 정상적으로 동작하지만, fallback 적용 시 width 등 다른 값을 변경해야 할 경우가 있습니다.

@position-try --my-custom-position {
  position-area: top left;
  width: 50px;
}

 

#tooltip { 
  position: absolute;
  position-area: top right; 
  position-try: most-width, --my-custom-position, bottom left;
  width: 100px; 
}

위 코드와 같이 커스텀 지정 속성을 사용 할 경우, 요소의 너비는 앵커의 오른쪽 상단 가장자리로 다시 위치하려고 할 때 #tooltip의 크기가 조정됩니다.
이런식의 추가 지정은 다양한 레이아웃에서 UI를 적절하게 지정하는 데 도움이 될 수 있습니다. 

예제

See the Pen Almanac – position-try-options property – Demo by WITBLOG (@witblog) on CodePen.

출처

• [MDN Web Docs] Modules – CSS anchor positioning
• [CSS-Trick] CSS Anchor Positioning Guide