Help us understand the problem. What is going on with this article?

ヘッダーをposition: fixed;で固定した時のアンカーリンクずれ解消法とoverflow: hidden;

概要

position: fixed;で画面上部にヘッダーを固定した場合の
アンカーリンクのズレを直す方法として以下を試しましたが、
親要素にoverflow: hidden;が設定されているとChromeで効かなくなることに気づかずハマったのでメモ。

試した解消法

パディングとネガティブマージンを使う

See the Pen ヘッダーをposition: fixed;で固定した時のアンカーリンクずれ解消法 by Kai (@kai-ono) on CodePen.

アンカー要素 {
  margin-top: -60px;
  padding-top: 60px;
}

:target疑似クラスを使う

:target::before {
   content: "";
   display: block;
   height: 50px;
   margin-top: -50px;
}

効かなかった方法 (2019/9/19時点)

疑似要素を使う

See the Pen 疑似要素を使ったアンカーずれ解消法サンプル(※効きませんでした) by Kai (@kai-ono) on CodePen.

アンカー要素ID::before {
    content: "";
    display: inline-block;
    height: 50px;
    margin-top: -50px;
    vertical-align: top;
}

親要素にoverflow: hidden;が入っている

※Chromeで効かなくなります。Safari、Firefoxは大丈夫。


See the Pen
ヘッダーをposition: fixed;で固定した時のアンカーリンクずれ解消法(親要素にoverflow: hidden;があって効かないパターン)
by Kai (@kai-ono)
on CodePen.


参考サイト

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away