html - 为什么我的 h1 元素出现在 header-image 后面，尽管它是在 header 元素下面定义的？

Question

为什么我的 h1 元素出现在 header-image 后面，尽管它是在 header 元素下面定义的？

header {
  display: flex;
  position: fixed;
  height: 75px;
  width: 100%;
}

.logo {
  width: 60vw;
}

#header-img {
  width: auto;
  height: 100%;
}

<header id="header">
  <div class="logo"><img id="header-img" src="https://s8.postimg.cc/kxr6hl1v9/logo.png"></img>
  </div>
</header>

<div>
  <h1>hello i'm vivek dalsaniya</h1>
</div>

Answer 1

<header>是position: fixed .任何不是 position: static 的元素(默认)或 position: relative从normal flow中取出并且不影响不是其后代的元素的布局。