フォームで遷移した時の位置の調整

Question

htmlのフォームで

<form action="#block" method="post">

サブミットした後、同一ページの「id="block"」の要素の位置にくるように
したいのですが、位置が下にずれてしまいます。

原因はヘッダーが固定されているためなのですが、フォームの遷移後だとどのように
位置を調整するのか分からず、教えていただきたいです。

Comments

[退会済みユーザー]

「ヘッダ固定　ページ内リンク」で検索すれば、そこそこやりたいことの情報出てくると思います。

Answer 1

BootstrapドキュメントではこのようなCSSが適用されているようですが、

.bd-content>h2[id]::before,
.bd-content>h3[id]::before,
.bd-content>h4[id]::before {
    display: block;
    height: 6rem;
    margin-top: -6rem;
    content: "";
}

ほかにも手はあるようなので調べてみては？

参考: ヘッダ固定時のページ内リンクのズレをCSSだけで解消する3つのテクニック
https://www.tomotanuki.com/entry/web-in-page-link-fixed