固定ヘッダーを考慮してアンカーを調整するにはどうすればよいですか?

固定ヘッダー用に調整するアンカーのオフセット

Web ページに固定ヘッダーが存在する場合、その下のアンカーをクリックすると、アンカーがページの上部に揃うようにページをジャンプします。これにより、同時に参照する必要があるコンテンツがわかりにくくなる可能性があります。

解決策: HTML/CSS オフセット手法

この問題に対処するには、CSS を使用してアンカーの位置をオフセットします。 :

1. クラスをアンカー:

   <a class="anchor">

   ログイン後にコピー

2. アンカーをブロック要素に変換し、相対的に配置します:

   a.anchor {
    display: block;
    position: relative;
   }

   ログイン後にコピー

3. 移動するには負のオフセットを適用します実際の上のアンカーPosition:

   a.anchor {
    top: -250px;
   }

   ログイン後にコピー

アンカーがページ上のコンテンツの位置に正しく揃うように、このオフセット値は固定ヘッダーの高さに基づいて調整する必要があります。

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