CSS を使用して HTML アンカーをオフセットして、固定ヘッダーの背後に隠れないようにするにはどうすればよいですか?

CSS を使用した固定ヘッダーでの HTML アンカーのオフセット

HTML アンカーと固定ヘッダーを使用する場合、ページが次のアンカー位置にジャンプするのがイライラすることがあります。ページの上部にあるため、コンテンツが固定ヘッダーの後ろに隠れてしまいます。この問題を解決し、アンカーを正確に配置するには、CSS テクニックを使用してヘッダーの高さだけアンカーをオフセットできます。

簡単なアプローチの 1 つは、アンカー用のカスタム CSS クラスを作成することです。

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

次に、このクラスの CSS ルールを定義して、それをブロック要素にし、ページ上で相対的に配置します。それに応じて「top」プロパティを調整することで、希望の量だけアンカーをオフセットできます。たとえば、250 ピクセルずつオフセットするには、次のようにします。

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

この手法を使用すると、固定ヘッダーに関係なく、アンカーの位置を制御し、ページ上の目的のコンテンツと正しく位置合わせすることができます。存在感。

以上がCSS を使用して HTML アンカーをオフセットして、固定ヘッダーの背後に隠れないようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。