고정 헤더에 대해 CSS를 사용하여 앵커 요소 위치를 정확하게 조정하려면 어떻게 해야 합니까?

고정 헤더에 대한 정확한 앵커 오프셋 조정

이 문제를 쉽게 해결하려면 JavaScript 없이도 CSS를 사용할 수 있습니다.

HTML 수정:

다음과 같이 앵커 요소에 고유한 클래스를 할당합니다.

<a class="anchor">

CSS 사용자 정의:

CSS를 활용하여 앵커의 실제 위치를 기준으로 앵커 위치를 오프셋합니다. page:

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

이 코드는 다음을 달성합니다.

• display: block: 앵커를 블록 요소로 변환합니다.
• 위치: 상대: 원본을 기준으로 앵커 위치를 조정할 수 있습니다. 위치.
• top: -250px: 앵커를 위쪽으로 250px 오프셋합니다.

"가시성: 숨김" 속성은 선택 사항이며 원하는 경우 제거할 수 있습니다.

위 내용은 고정 헤더에 대해 CSS를 사용하여 앵커 요소 위치를 정확하게 조정하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!