ホームページ > ウェブフロントエンド > CSSチュートリアル > 固定ヘッダーの CSS でアンカー要素の位置を正確に調整するにはどうすればよいですか?

固定ヘッダーの CSS でアンカー要素の位置を正確に調整するにはどうすればよいですか?

Mary-Kate Olsen
リリース: 2024-12-11 15:36:15
オリジナル
450 人が閲覧しました

How Can I Precisely Adjust Anchor Element Position with CSS for Fixed Headers?

固定ヘッダーの正確なアンカー オフセット調整

この問題を簡単に解決するには、JavaScript を使用せずに CSS を使用できます。

HTML変更:

アンカー要素に次のような固有のクラスを割り当てます:

<a class="anchor">
ログイン後にコピー

CSS カスタマイズ:

CSS を利用して、アンカーの位置を、実際の位置を基準にしてオフセットします。 page:

a.anchor {
    display: block;
    position: relative;
    top: -250px;
    visibility: hidden;
}
ログイン後にコピー

このコードは次のことを実現します:

  • display: block: アンカーをブロック要素に変換します。
  • position:relative: 元のアンカーの位置を基準にしてアンカーの位置を調整できます。 location.
  • top: -250px: アンカーを上に 250 ピクセルオフセットします。

「visibility: hidden」属性はオプションであり、必要に応じて削除できます。

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート