【CSSだけ】ページ内リンク
移動先が固定ヘッダーに隠れるのを直す方法
ページ内リンクを設置したものの、移動先の見出しが固定のヘッダーに隠れてしまう…
なんて現象が起きてても、気にせずそのままにしてませんか？
（あ、それ以前の私です。すみません。ズボラで。汗汗）
意外と簡単に直せるので、ぜひ直しましょう。
パディングとネガティブマージンを使う
下記のソースで調整できます。
ヘッダーの高さが70pxだった場合。
.anchor {
display: block;
padding-top: 70px;
margin-top: -70px;
}
簡単解説
何をしてるか解説しますと…
padding-top: 70px; ←要素の上部に70ピクセルの余白を追加します。つまり、要素の内部上部に70ピクセルの空白領域ができます。
margin-top: -70px; ←要素の上部にマイナス70ピクセルのマージンを設定します。これにより、要素が通常のドキュメントフローから上に70ピクセル移動します。
つまり、他の要素との間に70ピクセルの空白をもたせ、かつその位置を通常のドキュメントフローからずらしているのです。
なんで被ってしまうのか解説しますと…
headerをfixedなどで固定すると、headerは普通のドキュメントフロー（HTML文書内での要素の配置と順番のこと）から取り外されます。その結果、他の要素は、取り外されたheaderのスペースを埋めるように配置されます。
ページ内リンクは、表示画面の上に位置するように表示されます。
だから被ってしまうんですね。
まとめ
どちらにマイナスをつけるか忘れる方は、ネガティブマージンで上にずらしている！ということを思い出せば忘れずにできそうですね。簡単に実装できるので、めんどくさがらずにやりましょうね（←自分に言い聞かせ）
