前回のページ内リンクのずれ解消の応用（？）です。

いつものように、ずれを解消するためにヘッダーの高さ分をpaddingとネガティブmarginで調整すると…今回の場合、背景に色をしたため位置がずれてしまいました。さらに、よく見るとpaddingとネガティブmarginを付けている要素（.contents）が、前の要素（.linkbox）に重なってしまっています。

See the Pen Link test02-1 by Yurie (@kkrg) on CodePen.

ずれを解消したものがこちら。
位置が調整されているのがわかると思います。

See the Pen Link test02-2 by Yurie (@kkrg) on CodePen.

<header>header 64px</header>
<div class="linkbox">
  <a href="#link">Localnav</a>
</div>
<div class="contents" id="link">
  <p>contents</p>
</div>

header {
  background: #fff;
  color: #666;
  height: 64px;
  line-height: 64px;
  text-align: center;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
}

.linkbox {
  background-image: linear-gradient(-45deg, #f2f2f2 25%, #e2e2e2 25%, #e2e2e2 50%, #f2f2f2 50%, #f2f2f2 75%, #e2e2e2 75%, #e2e2e2);
  background-size: 40px 40px;
  background-attachment: fixed;
  padding-top: 164px;
  height: 600px;
  text-align: center;
  /* 次の要素（.contents）より重なりを上に表示 */
  position: relative; /* 重なりを上に */
}

.linkbox a {
  background: #333;
  border-radius: 5px;
  color: #fff;
  padding: 20px 60px;
  text-decoration: none;
  letter-spacing: 1px;
  display: inline-block;
}

.contents {
  background: rgba(170, 170, 170, .75);
  border-top: solid 2px #f00;
  color: #666;
  height: 600px;
  font-size: 120px;
  text-align: center;
  /* 停止位置調整 */
  padding-top: 64px; /* 64px -> header高さ */
  margin-top: -64px; /* 64px -> header高さ */
}

重要なのは、前の要素.linkboxでコメントアウトを残している部分です。今回のずれの原因は、要素の重なりだったのでそれをposition: relative;で解消してあげました。

また、今回は.contentsに余白を付けていませんが、付けてあげる場合はヘッダーの高さ＋任意の余白分の値を与えてあげると上の余白を簡単に調整することができます。

もうひとつの方法

アンカーリンク用のdivを別に用意してあげる手もあります。これだと、位置調整用のスタイル以外は当てることがないので簡単ですね。

See the Pen Link test03 by Yurie (@kkrg) on CodePen.

<header>header 64px</header>
<div class="linkbox">
  <a href="#link">Localnav</a>
</div>
<div id="link"></div><!-- 追加 -->
<div class="contents"><!-- id="link" 削除 -->
  <p>contents</p>
</div>

header {
  background: #fff;
  color: #666;
  height: 64px;
  line-height: 64px;
  text-align: center;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
}

.linkbox {
  background-image: linear-gradient(-45deg, #f2f2f2 25%, #e2e2e2 25%, #e2e2e2 50%, #f2f2f2 50%, #f2f2f2 75%, #e2e2e2 75%, #e2e2e2);
  background-size: 40px 40px;
  background-attachment: fixed;
  padding-top: 164px;
  height: 600px;
  text-align: center;
}

.linkbox a {
  background: #333;
  border-radius: 5px;
  color: #fff;
  padding: 20px 60px;
  text-decoration: none;
  letter-spacing: 1px;
  display: inline-block;
}

.contents {
  background: rgba(0, 0, 0, .3);
  border-top: solid 2px #f00;
  color: #666;
  height: 600px;
  font-size: 120px;
  text-align: center;
}

#link { /* 停止位置調整 */
  padding-top: 64px; /* 64px -> header高さ */
  margin-top: -64px; /* 64px -> header高さ */
}