IDにリンクすると、要素がヘッダの下に表示されます

Question

私はWeb開発には新しく、ほとんどの場合インターネットチュートリアルなどで自分自身を教えようとしています。私は完全な初心者ですので、これはちょっと疑問に思うかもしれませんが、私はgoogleを上下に検索し、まだ答えを見つけていません。

私の問題は基本的に、ページの上部にposition: fixed;ヘッダーのあるWebページを作成したことです。私はページのマージンを調整して、すべてが見栄えのように見えるようにしました。私が意図したとおりにページが表示されます。

しかし、私は自分自身が修正できない小さな欠点に遭遇しました。私は、同じページの他の場所にある特定の見出しにリンクするリンクをページにいくつか持っています。 （例えば、私は<section id="section_3">...</section>のような要素を持っていて、同じページのどこかに<a href="#section_3">...</a>を使っています。それは適切なヘッダーにつながりますが、残念ながら<section>要素の上にリンクされています）はページ上部の固定ヘッダーで覆われているので、セクションヘッダーを読むために少し上にスクロールする必要があります。<section>要素ではなく、<h1>要素へのリンクを試みました。 html5などがありますが、私は同じ問題を抱えています。

これらのIDリンクに従うと、セクションヘッダーがヘッダーの下に最初に表示されるようにしたいと思います。これは簡単な修正があるだけの一般的な状況だと私は思うが、被験者には何も見つかりません。 （私はhtml5やcss3を使っても問題はありません。現在のところ、これは単なる個人的なプロジェクトです。私が何か公開している時には、それを使って何の問題もないと思っています。当面はブラウザ上で動作する必要があります。）

お手数をおかけしますようお願い申し上げます。

Answer 1

@johnniebensonコメントを追加するだけで、関連セクションのようにCSSを追加します。ヘッダーの高さが60pxで、ヘッダーの下に約40pxのスペースを与えたいとします。例：#section_3:target{ padding-top: 100px;margin-top: -100px}

Answer 2

各sectionのpadding-topは、headerの高さと同じに設定してみてください。各sectionのh1にリンクします。それはトリックを行う必要があります。