CSS에서 고정 헤더로 앵커 점프를 방지하는 방법은 무엇입니까?

고정 헤더에 대한 앵커 오프셋: 정확한 가이드

웹페이지에서 고정 헤더로 작업할 때 삐걱거리는 점프가 발생하는 것이 일반적입니다. 페이지 아래에 배치된 앵커로 이동할 때. 이는 앵커가 뷰포트 상단에 정렬되어 헤더 뒤의 콘텐츠가 가려지기 때문입니다.

이 문제를 완화하기 위해 헤더 높이를 보상하는 오프셋을 도입할 수 있습니다. 이 오프셋을 사용하면 앵커가 올바른 위치에 배치되고 방해 없이 콘텐츠를 스크롤하고 표시할 수 있습니다.

HTML/CSS 솔루션:

순수한 CSS 접근 방식은 방해 없이 가능합니다. 자바스크립트의 필요성. "anchor"와 같은 고유한 클래스를 앵커 요소에 할당합니다.

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

다음으로 CSS를 사용하여 앵커 스타일을 지정하여 블록 요소로 만들고 헤더의 오프셋과 동일한 음수 상단 오프셋으로 상대적으로 배치합니다. 높이(예: -250px):

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

이 수정은 앵커를 수직으로 250px만큼 오프셋하여 활성화되면 페이지를 스크롤하면 고정된 헤더에 가려지지 않고 원하는 위치에 콘텐츠가 표시됩니다.

위 내용은 CSS에서 고정 헤더로 앵커 점프를 방지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!