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

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

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

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

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

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

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

CSSカテゴリの最新記事