为什么我的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中取出，并且不会影响不是它的后代的元素的布局。

Answer 2

这是由于display: fixed造成的。移除它可以解决问题

​

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

.logo{
  width:60vw;
}

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

nav{
  margin:20px;
}

ul{
  display:flex;
  list-style-type: none;
}

li{
  padding:0px 10px;
 
}

li a{
  display:block;
  text-decoration:none;
   color:black;
}

<header id="header">
   <div class="logo">
     <img id="header-img" src="https://app.mangoconnects.com/assets/mango_logo_2f-b45e222cecb567cb52fe084150e627c2c0ed3b62b453bf4f68f46aa0f8a40dd7.png">      </img>
    </div> 
  <nav id="nav-bar" class="">
     <ul>
    <li><a href="#about">About</a></li>
    <li><a href="#product">Product</a></li>
    <li><a href="#contact">Contact</a></li>
    <ul>  
  </nav>
 </header>
 
 <div id="about">
   <h1>Who we are</h1>
    </div>
 <div id="product"></div>   
 <div id="contact"></div>   

​

Answer 3

因为您使用的是position fixed，并且元素相对于浏览器窗口定位。