CSSの Position:fixed; を指定した要素の上部に余白ができる

当ページのリンクには広告が含まれています。
  • URLをコピーしました!

ヘッダーなどを固定するとき、通常は “ psition:fixed; ” を使うと思います。
しかし、上部に余白が出てしまう事があります。

その場合、次の要素の上マージン ” margin-top ” により、引っ張られる感じで、余白が付いてしまう場合が多いです。

例えば、要素 “header” に “ position:fixed; ” 、
次の要素、contents を固定ヘッダー分下げようとして、” margin-top:100px ” ; のように指定している場合です。

固定した“ psition:fixed; ” 要素の位置指定、“ top ”を省いている場合、この現象が起こります。

ですので、下記のようにちゃんと位置指定すると問題なく表示されます。

よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

目次