ヘッダー上部固定でページ内リンクがずれる!

2014/08/11

こんにちは。
今回はヘッダー上部固定でページ内リンクがずれるのでその対処法です。

ヘッダーをpositin:fix;で固定するとヘッダーの高さ分ページ内リンクがずれます。
のでcssでヘッダーの高さ分アンカー位置をずらします。
※ヘッダーの高さが150pxだとすると下記のようになります。

[css]
div {
padding-top: 150px;
margin-top: -150px;
}
[/css]

 

Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法
Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法

 

こちらの記事でうまくいかない場合は下記の記事をお試し下さい。
jQueryで簡単にヘッダー上部固定でページ内リンクがずれるのを防ぐ!

 

以上でヘッダー上部固定でページ内リンクがずれるのでその対処法でした。

Topへ戻る