ヘッダーにfixedが指定されていると重なる
ヘッダーにfixedが指定されているとアンカーリンクをクリックした際に移動先がヘッダーの下に表示されてしまう。
こうなるのを防ぐにはアンカーリンクの飛び先のidの箇所にmargin-top(ネガティブマージン)とpadding-topを追加すれば良い。
CSSでのアンカーリンク位置調整方法
例えばアンカーリンクがhref="#link1"のようになっている場合は遷移先のidにヘッダーの高さと同じmargin-top(ネガティブマージン)とpadding-topを追加する。
<h1 id="link1" class="anchor">link1</h1>
.anchor { margin-top: -50px; padding-top: 50px; }
遷移先のidにmargin-topやpadding-topが指定されている場合はそのままCSSを追加すると上書きしてしまうため、遷移したい場所のタグの上に空のaタグを配置してidとmargin-top(ネガティブマージン)とpadding-topを同じように追加する。
<header>header</header> <ul> <li><a href="#link">link</a></li> <li><a href="#link1">link1</a></li> </ul> <a id="link" class="anchor"></a> <h1 id="link1" class="anchor">link1</h1>
header { position: fixed; top: 0; width: 100%; height: 50px; line-height: 50px; background: #eee; box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1); text-align: center; } .anchor { margin-top: -50px; padding-top: 50px; }