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>

标签： htmlcss

Answer 1

<header>是position: fixed。_ 任何不是position: static（默认）或position: relative脱离正常流程且不影响非其后代元素的布局的元素。