CSS で固定ヘッダーの背後にジャンプするアンカーを修正するにはどうすればよいですか?

CSS を使用した固定ヘッダーの HTML アンカーの調整

固定ヘッダーを使用する場合、アンカーがコンテンツ内のコンテンツにリンクされている状況がよく発生します。ページの先頭にジャンプし、ヘッダーの後ろのコンテンツを隠します。この問題を解決するには、固定ヘッダーの下部に合わせてアンカーのオフセットを調整します。

効果的な解決策の 1 つは、CSS を使用することです。

1. アンカーの割り当てクラス: アンカーにカスタム クラスを割り当てます。 "anchor."

<a class="anchor">

2. アンカーの位置: ブロック要素として動作するようにアンカーをスタイルし、相対的に配置します。 top に負の値を設定すると、アンカーをページ上の実際の位置から上に移動できます。

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

この調整により、アンカーが正しいコンテンツにリンクしたままであることが保証されます。ヘッダーの後ろの隠れた部分。可視性: 非表示に注意してください。プロパティは、アンカーが視覚的に表示されないようにするために使用されます。

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