margin-topを設定するとヘッダーが下がる

Question

下記のように、margin-topを設定すると、ヘッダーが下がってしまいます。
本当によく分からず、調べても出てこず、かなり抽象的ですが、よろしくおねがいします。

検証したものが以下になります。

 <div class="big">
  <div class="container">
    <div class="show-texts">
      <%= @post.content %>
    </div>
  </div>
</div>

.container {
  background-color: white;
  margin: 0 auto;
  width: 700px;
  height: 500px;
  border: 10px solid #f5f5f5;
  margin-top: 100px;
}

 <header>
      <div class="header-left">
        <p>ChatSpot</p>
      </div>
      <div class="header-right">
        <ul>
          <li>
            <%= link_to("投稿一覧", "/posts/index") %>
          </li>
          <li>
            <%= link_to("新規登録", "/signup") %>
          </li>
        </ul>
      </div>
    </header>

 header {
  height: 75px;
  width: 100%;
  background-color: #4169e1;
  position: absolute;
  z-index: 1;
  display: flex;
  justify-content: space-between;
}

ruby

Comments

[Lhankor_Mhy]

header 要素は最初のHTMLで言うと、どこにありますか？
.big の上ですか？

[aspot_0734]

headerは常に表示させるためにapplication.css,　bigはposts.cssというファイルに、別々に書いています。
それが原因ですかね？

[kei344]

まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。

[aspot_0734]

忘れてました。
ありがとうございます。

Answer 1

bodyや.bigにpadding-topを指定する形で対応したほうがいい箇所と考えます。

marginは親要素の枠を越えて周りの要素に影響するので、
子要素、孫要素に大きな値を指定しないようにしたほうが無難です。

あと、<header>への指定は、position: fixed;ではないでしょうか?
(意図通りの挙動をしていないなら、試してみてもいいと思います。)

Comments

[aspot_0734]

position: absolte;
を
position: flexed;
top: 0;
とすることでmarginのままでもできました！
ありがとうございます！

[new1ro]

よかったです！

[new1ro]

ただ、外側の余白はできるだけ外側の要素 (=浅い階層の要素) で指定したほうが、
どの要素で余白を指定しているかを探しやすくなるので、.containerに指定するのは避けたほうがいいと思います。

以下のようなシチュエーションできっと似たような崩れ方をするのでそのときにでも思い出してください。
```
<div style="background: gray;">
<div class="container" style="margin-top: 100px;">
...
</div>
</div>
```