CSS의 고정 헤더 뒤로 앵커가 점프하는 문제를 어떻게 해결할 수 있나요?

CSS를 사용하여 고정 헤더용 HTML 앵커 조정

고정 헤더로 작업할 때 앵커가 페이지가 페이지 상단으로 이동하여 헤더 뒤의 콘텐츠가 가려집니다. 이 문제를 해결하려면 고정 헤더의 하단에 맞춰 앵커의 오프셋을 조정하면 됩니다.

CSS를 사용하는 효과적인 솔루션 중 하나는 다음과 같습니다.

1. 앵커 할당 클래스: 앵커에 다음과 같은 사용자 정의 클래스를 할당합니다. "anchor."

<a class="anchor"></a>

2. 앵커 위치 지정: 앵커가 블록 요소처럼 작동하도록 스타일을 지정하고 상대적으로 위치를 지정합니다. 상단에 음수 값을 설정하면 페이지의 실제 위치에서 앵커를 위로 이동할 수 있습니다.

a.anchor {
  display: block;
  position: relative;
  top: -250px;
  visibility: hidden;
}

이 조정을 통해 앵커가 여전히 올바른 콘텐츠에 연결되도록 보장하는 동시에 헤더 뒤의 숨겨진 부분. 가시성: 숨김; 속성은 앵커가 시각적으로 보이지 않도록 하는 데 사용됩니다.

위 내용은 CSS의 고정 헤더 뒤로 앵커가 점프하는 문제를 어떻게 해결할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!