为什么我的h1元素出现在header-image后面虽然它被定义在header元素下面？

Question

为什么我的h1元素出现在header-image后面，虽然它被定义在header element下面？

＆＃13;

＆＃13;

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

.logo {
  width: 60vw;
}

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

因为您使用固定的位置，并且该元素相对于浏览器窗口定位。

Answer 4

给持有H1填充的div以抵消标题。

<div style="padding-top:80px;">
  <h1>hello i'm vivek dalsaniya</h1>
</div>