position:fixed;
top:0;
とかで上部に固定してるところにページ内リンクをつけるとコンテンツが被ってしまう。
それを見越したjsを組むよりももっと汎用的で簡単な回避方法。
margin-top:-固定表示してるやつの高さ;
padding-top:固定表示してるやつの高さ;
リンク先のコンテンツにこれを仕込んどくとコンテンツ自体の開始位置が上部のコンテンツにめり込む。
マージンで相殺してるからデザイン壊れない。
◆欠点
コンテンツに背景画像をつけてるときはしんどいことになる。
上部の余白がでかすぎるから、このままだと縦方向でのcenter指定がズレる。
どうしても使いたいならbottomでも余白と相殺を仕込まなきゃいけなくなる。
ダルすぎる。
あとはブラウザ完全対応してないけど、
background-position:right ●px bottom ●px;
ってのも一応できるから、それで頑張るとか。
コメント