cssのpaddingについて

Question

前提・実現したいこと

cssのpaddingについて質問です。
現在模写コーディングをしているのですが、答えを見ながらわからないところがあったので質問させていただきます。

hedderにてロゴの写真を左にハンバーガーメニューを右に配置したhedderを作る際のソースコードですが、以下がこたえになっていました。

親要素であるheaderにpaddingがあるのになぜ子要素(.toggle_btn)で改めてrightやtopを入力しているのでしょうか？

該当のソースコード

   <header id="header">
      <h1 class="site-title">
        <a href="index.html"><img src="img/logo.svg" alt="Sneakers"></a>
      </h1>

      <div class="toggle_btn">
        <span></span>
        <span></span>
        <span></span>
      </div>

      <div id="mask"></div>
    </header>

#header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 20px 40px;
  position: fixed;
  z-index: 10;
  background-color: #fff;
}
.toggle_btn {
  display: block;
  position: fixed;
  top: 25px;
  right: 45px;
  width: 30px;
  height: 30px;
  transition: all .5s;
  cursor: pointer;
  z-index: 20;
}

Comments

[m.ts10806]

hedderではなくheaderです。
細かいところですが結構大事です。

[m.ts10806]

ちなみに「どういうレイアウトを実現する要件なのか」が分からない限りは他者には応えようがないです。
意図は作った人にしか分かりませんし。

Answer 1

position: fixed;があるからです。
書かれているコードでは、画面がスクロールしたときに、.toggle_btnの要素が画面内に残ります。

positionを付けた要素は基準位置からの距離を指定するので、親要素のpaddingの影響を受けません。

【CSSのpositionを総まとめ！absoluteやfixedの使い方は？】
https://saruwakakun.com/html-css/basic/relative-absolute-fixed#section6

Comments

[t.t.t.]

positionについて浅はかすぎました、、、、
大変勉強になります!
ありがとうございました^^

[t.t.t.]

追記質問失礼します。
この場合なぜflexにしているのでしょうか？
btnの位置を基準位置設定にするなら横並びにする意味がないように思えるのですが...

[kei344]

部分的にしか情報がないのでわかりません。
作成した人に聞きましょう。