또 다른 앵커 포지셔닝 Quirk

CSS 앵커 포지셔닝 : 놀라운 기능이지만 까다로운 문제가 있습니다. Flexbox 나 그리드와 같은 게임 체인저는 아니지만 수십 년 동안 CSS 포지셔닝의 격차를 메 웁니다. 그러나 수수께끼의 행동으로 이어지는 몇 가지 독특한 특성이 있습니다. 이 기사는 오랫동안 나를 괴롭힌 앵커 포지셔닝 문제를 탐구 할 것입니다.

원산지 나는 한 달 전에 다른 사람의 앵커 포지셔닝 사례, 특히 "앵커 포지셔닝 및 스크롤 구동 애니메이션"에 관한 Temani Afif의 기사를 읽는 동안이 문제를 발견했습니다. 우리는이 기사를 읽고 내 관심을 끌었던 것을 볼 것을 강력히 권장합니다. 그는 앵커 포지셔닝과 스크롤 구동 애니메이션을 영리하게 결합하여 진행 상황이 변경됨에 따라 색상을 변경하는 범위 슬라이더를 만듭니다.

더 놀라운 점은 그가 앵커 이름이 동일한 두 개의 대상 요소를 사용한다는 것입니다. 각 요소는 마술과 같은 해당 앵커 포인트에 첨부됩니다. 이것이 흥미롭지 않은 것처럼 보이면 앵커 포지셔닝이 어떻게 작동하는지 간단히 검토해야합니다.

CSS 앵커 포지셔닝 및 앵커-스코프 속성 보다 심층적 인 이해를 위해 전체 CSS 앵커 포지셔닝 안내서를 참조하십시오.

앵커 포지셔닝은 CSS에 두 가지 새로운 개념을 가져옵니다 :

앵커 포인트

요소 및 target 요소. 앵커는 다른 요소를 찾는 데 사용되는 기준 요소입니다. 대상 요소는 하나 이상의 앵커 포인트에 비해 절대적으로 위치되는 요소입니다.

앵커와 대상은 거의 모든 요소 일 수 있습니다. 두 개의 div가 나란히 배치 된 것으로 생각할 수 있습니다.

먼저,

속성을 ​​사용하여 CSS에 앵커 요소를 등록해야합니다.

그런 다음 절대적으로 위치 된 요소의

속성을 ​​사용하여 동일한 이름의 앵커 포인트에 첨부하십시오. 그러나 대상을 앵커 포인트 주위로 이동하려면

속성이 필요합니다.

이것은 잘 작동하지만 마커를 더 많은 앵커와 대상을 포함하도록 변경하면 상황이 복잡해집니다. 앵커 1

대상 1

<code><div>anchor</div>
<div>target</div></code>

앵커 2

anchor-name 대상 2

<code>.anchor {
  anchor-name: --my-anchor;
}</code>

앵커 3

position-anchor 대상 3 position-area 대상 요소는 가장 가까운 앵커 포인트에 부착되어 있지 않지만 DOM의 마지막으로 등록 된 앵커 포인트에 모두 쌓여 있습니다.

이 문제를 해결하기 위해 Chrome 131에

속성이 도입되었습니다. 각 대상이 올바르게 첨부되도록 앵커 포인트의 범위를 하위 트리로 제한합니다. 그러나 나는이 속성에주의를 기울이고 싶지 않다. 왜냐하면 처음에 나의 관심을 끌었던 것은

temani가 그것을 사용하지 않았다는 것이었다. 어떤 이유로 든 모든 대상은 마술처럼 올바르게 첨부됩니다. anchor-scope 무슨 일이야?

대상은 일반적으로 가장 가까운 앵커가 아닌 DOM의 마지막 앵커에 부착되지만 첫 번째 예에서는 동일 한

및 해당 추가 대상을 가진 두 개의 앵커가 보입니다. 이 모든 것은

속성을 ​​사용하지 않습니다. 무슨 일이에요?

두 단어 : anchor-name는 블록 anchor-scope를 포함합니다.

앵커 포지셔닝에 대해 요소가 블록을 포함하는 방법에 크게 의존한다는 점에 주목해야합니다. 이것은 앵커 포지셔닝 자체의 고유 한 특성이 아니라 절대 포지셔닝 특성입니다. 절대적으로 배치 된 요소는 격리 블록에 비해 배치되는 반면, ,

또는 와 같은 여백 속성은 단순히 포함 된 블록의 경계 주위에 요소를 이동시켜 소위 수정 된 포함 블록을 만듭니다. 앵커에 첨부 된 대상은 바닥에서

속성이하는 일은 대상의 여백을 변경하는 것입니다.

일반적으로, 절대 포지셔닝 요소의 포함 블록은 전체 뷰포트이지만 의 조상 요소가 아닌 모든 위치 속성에 의해 변경 될 수 있습니다 (일반적으로 ). Temani는이 사실을 활용하여 각 슬라이더에 대한 새로운 포함 블록을 만들어 해당 앵커 포인트에만 연결할 수 있습니다. 코드를 보면 처음에 코드를 찾을 수 있습니다. top: 0px 이전 예 에서이 전략을 사용하면 갑자기 올바르게 첨부됩니다! left: 30px inset: 1rem 또 다른 질문 각 앵커를 해당 대상에 부착하기 위해 속성을 ​​사용하는 대신 절대 요소의 포함 블록을 계산하는 방법을 활용합니다. 그러나 추가 코드가 필요하지 않은 다른 방법이 있습니다. 나는 드라이브 애니메이션과 앵커 위치를 동시에 실험 할 때 이것을 발견하고 텍스트 버블 각주를 게시물 측면에 첨부하려고 시도했습니다. 논리적으로 각주는 목표이지만 앵커 포인트의 선택은 약간 까다 롭습니다. 나는 처음에 각 단락이 앵커로 사용될 수 있다고 생각했지만

동일 한 앵커가 여러 개 있다는 것을 의미합니다. 결과 : 모든 대상은 마지막 앵커에 쌓입니다 :

이것은 각 주석에 새로 포함 된 블록을 생성하는 이전 방법에 의해 해결 될 수 있습니다. 그러나 우리는 또 다른 접근 방식을 취할 수 있으며, 이는 환원주의 접근법이라고 부릅니다. 가 동일 한 여러 앵커가있을 때 문제가 발생하므로 모든 대상의 공통 앵커가 될 수있는 요소를 사용하여 앵커 수를 하나로 줄입니다. position-area이 경우 각 대상을 게시물의 양쪽에만 배치하려고합니다. 따라서 게시물의 전체 본체를 앵커로 사용할 수 있으며, 각 대상이 수직 축에 자연스럽게 정렬되므로 남은 모든 것은 수평 축을 따라 이동하는 것입니다. 원래 게시물이 어떻게 수행되었는지 확인할 수 있습니다!

결론

아마도 최근 브라우저에 출시 된 CSS 속성 (지금까지는 Chrome 131)이므로 지원이 기대치를 초과 할 것으로 예상 할 수 없습니다. 언제 어디서나 사용하고 싶지만 잠시 동안 짧은 데모로 제한됩니다. 이것은 Chrome 125 이상에서 지원되는 다른 앵커 포지셔닝 특성의 사용을 제한하는 이유가 아니기 때문에 (그리고 가까운 미래의 다른 브라우저에서) 이러한 사소한 문제가 걱정없이 앵커 포지셔닝을 계속 사용할 수 있기를 바랍니다.

위 내용은 또 다른 앵커 포지셔닝 Quirk의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!