固定后，为什么标题会向下移动？

时间：2018-11-08 20:52:12

标签： html css

在标题中，我放置了页面标题和导航栏，但是一旦将其设置为position：fixed;顶部的边距增加了。这是Codepen的链接：

@import "https://fonts.googleapis.com/css?family=Permanent+Marker|Work+Sans|Oswald|Baloo+Bhaijaan|Roboto" ;
  
  #header{
    background-color:#191919;
    height:3rem;
    width:100%;
    position:fixed;
}

#header-img{
  font-family: 'Permanent Marker', cursive;
  color:white;
  margin-left:1.5rem;
  float:left;
  font-size:25px;
}
ul{
  list-style:none;
  display:flex;
  flow-direction:row;
  justify-content:space-around;
}

#nav-bar{
  background-color:#191919;
  float:left;
  width:100%;
}

#form{
  margin-top:45rem;
  margin-left:25%;
  margin-right:25%;
}

img{
  width:70%;
  height:70%;
}

a {
  text-decoration:none;
  font-family: 'Work Sans', cursive;
  color:white;
  font-size:12px;
}

#email{
  width:100%;
  box-shadow:3px 3px 5px grey;
}

#submit{
  font-family:'Roboto', cursive;
  font-size:14px;
  font-weight:bold;
  color:#686868;
  box-shadow:3px 3px 5px grey;
  padding: 5px 5px;
}

.catalog{
  margin-left:10%;
  margin-right:10%;
  margin-top:5rem;
  width:90%;
  float:left;
}

#password{
  width:100%;
  box-shadow:3px 3px 5px grey;
}

#video{
  margin-top:5rem;
  margin-left:25%;
  margin-right:25%;
  width:50%;
}

#courses{
  display:flex;
  flow-direction:row;
  flex-wrap:wrap;
}

#description{
  font-family: 'Oswald', cursive;
  font-size: 20px;
  text-align:center;
  font-size:16px;
}

li{
  padding: .25rem .5rem;
}

a:hover{
 color:#4ba0c8;
}

.nav-link{
  
}

.course-label{
  font-family: 'Baloo Bhaijaan', cursive;
  font-size:18px;
}


.images{
    margin: 5% 5%;
    padding: 3% 3%;
    width: 10vw;
    height:10vw;
    color:#d2d2d2;
  }

.images:hover{
  background-color:#99d3ff;
  color:#99d3ff;
}

@media (min-width:555px){
  #nav-bar{
    float:right;
    width:20rem;
    margin-right:1rem;
  }
  
  #form{
    margin-top:5rem;
  }
}
@media (min-width:360px){
  a{
    font-size:16px;
  }
  #description{
    font-size:20px;
  }
  #header-img{
    font-size:30px;
  }
  #header{
    height:4.5rem;
  }
}
 <header id="header">
  <h1 id="header-img">Codexpert</h1>
  <nav id="nav-bar">
    <ul>
      <li><a href="#">Community</a><li>
      <li><a href="#courses"><b>Catalog</b></a><li>
      <li><a href="#">Pricing</a><li>
    </ul>
  </nav>
</header>
<form id="form">
  <p id="description">Get started for free</p>
  <input type="input" id="email" placeholder="Enter your email"><br>
  <input type="password" id="password" placeholder="Enter your password"><br>
  <input type="submit" value="Submit" id="submit">
</form>
<div class="catalog">
  <div>
  <h2 style="color:gray;">Courses</h2>
    <hr>
  </div>
  <div id="courses">
  <div class="images">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/Python-logo-notext.svg/1200px-Python-logo-notext.svg.png" alt="python">
    <p class="course-label">Python</p>
  </div>
  <div class="images">
    <img src="https://images.sftcdn.net/images/t_app-cover-l,f_auto/p/2f4c04f4-96d0-11e6-9830-00163ed833e7/3163796423/java-runtime-environment-screenshot.png" alt="Java">
    <p class="course-label">Java</p>
       </div>
    <div class="images">
      <img src=https://static.platzi.com/media/achievements/badge-javascript-pro-74a59d28-8f05-4ad6-bca2-e77486bf586d.png alt="JavaScript">
      <p class="course-label">JavaScript</p>
    </div>
    <div class="images">
      <img src="https://ayudawp.com/wp-content/uploads/2014/06/tag-html.png" alt="Html">
      <p class="course-label">Html</p>
    </div>
    <div class="images">
      <img src="https://hype.codes/sites/default/files/icons_for_articles/red/ruby_on_rails.png" alt="Ruby on Rails">
      <p class="course-label">Ruby on Rails</p>
    </div>
    <div class="images">
      <img src="https://www.cbronline.com/wp-content/uploads/2016/07/C.png" alt="C++">
      <p class="course-label">C++</p>
    </div>
     </div>
  </div>
<div>
  <iframe width="718" height="404"
          id="video" src="https://www.youtube.com/embed/UcRtFYAz2Yo" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

1 个答案:

答案 0 :(得分：1)

您正面临margin-collapsing问题。将标头固定好后，将其从流中删除，您的表单成为第一个流入元素，因此它的顶边距将与body 1 的顶边沿对齐。这意味着，由于您没有设置任何top值 2 。因此，主体将具有较大的上边界，并且固定位置将考虑主体而定位。

要避免这种情况，您只需要to disable margin-collapsing（为避免其他问题，我建议这样做）或设置top值即可将元素移动到所需位置。

@import "https://fonts.googleapis.com/css?family=Permanent+Marker|Work+Sans|Oswald|Baloo+Bhaijaan|Roboto" ;
  
body {
 padding-top:1px; /*disable margin-collpasing*/
}
  
  #header{
    background-color:#191919;
    height:3rem;
    width:100%;
    position:fixed;
}

#header-img{
  font-family: 'Permanent Marker', cursive;
  color:white;
  margin-left:1.5rem;
  float:left;
  font-size:25px;
}
ul{
  list-style:none;
  display:flex;
  flow-direction:row;
  justify-content:space-around;
}

#nav-bar{
  background-color:#191919;
  float:left;
  width:100%;
}

#form{
  margin-top:45rem;
  margin-left:25%;
  margin-right:25%;
}

img{
  width:70%;
  height:70%;
}

a {
  text-decoration:none;
  font-family: 'Work Sans', cursive;
  color:white;
  font-size:12px;
}

#email{
  width:100%;
  box-shadow:3px 3px 5px grey;
}

#submit{
  font-family:'Roboto', cursive;
  font-size:14px;
  font-weight:bold;
  color:#686868;
  box-shadow:3px 3px 5px grey;
  padding: 5px 5px;
}

.catalog{
  margin-left:10%;
  margin-right:10%;
  margin-top:5rem;
  width:90%;
  float:left;
}

#password{
  width:100%;
  box-shadow:3px 3px 5px grey;
}

#video{
  margin-top:5rem;
  margin-left:25%;
  margin-right:25%;
  width:50%;
}

#courses{
  display:flex;
  flow-direction:row;
  flex-wrap:wrap;
}

#description{
  font-family: 'Oswald', cursive;
  font-size: 20px;
  text-align:center;
  font-size:16px;
}

li{
  padding: .25rem .5rem;
}

a:hover{
 color:#4ba0c8;
}

.nav-link{
  
}

.course-label{
  font-family: 'Baloo Bhaijaan', cursive;
  font-size:18px;
}


.images{
    margin: 5% 5%;
    padding: 3% 3%;
    width: 10vw;
    height:10vw;
    color:#d2d2d2;
  }

.images:hover{
  background-color:#99d3ff;
  color:#99d3ff;
}

@media (min-width:555px){
  #nav-bar{
    float:right;
    width:20rem;
    margin-right:1rem;
  }
  
  #form{
    margin-top:5rem;
  }
}
@media (min-width:360px){
  a{
    font-size:16px;
  }
  #description{
    font-size:20px;
  }
  #header-img{
    font-size:30px;
  }
  #header{
    height:4.5rem;
  }
}
<header id="header">
  <h1 id="header-img">Codexpert</h1>
  <nav id="nav-bar">
    <ul>
      <li><a href="#">Community</a><li>
      <li><a href="#courses"><b>Catalog</b></a><li>
      <li><a href="#">Pricing</a><li>
    </ul>
  </nav>
</header>
<form id="form">
  <p id="description">Get started for free</p>
  <input type="input" id="email" placeholder="Enter your email"><br>
  <input type="password" id="password" placeholder="Enter your password"><br>
  <input type="submit" value="Submit" id="submit">
</form>
<div class="catalog">
  <div>
  <h2 style="color:gray;">Courses</h2>
    <hr>
  </div>
  <div id="courses">
  <div class="images">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/Python-logo-notext.svg/1200px-Python-logo-notext.svg.png" alt="python">
    <p class="course-label">Python</p>
  </div>
  <div class="images">
    <img src="https://images.sftcdn.net/images/t_app-cover-l,f_auto/p/2f4c04f4-96d0-11e6-9830-00163ed833e7/3163796423/java-runtime-environment-screenshot.png" alt="Java">
    <p class="course-label">Java</p>
       </div>
    <div class="images">
      <img src=https://static.platzi.com/media/achievements/badge-javascript-pro-74a59d28-8f05-4ad6-bca2-e77486bf586d.png alt="JavaScript">
      <p class="course-label">JavaScript</p>
    </div>
    <div class="images">
      <img src="https://ayudawp.com/wp-content/uploads/2014/06/tag-html.png" alt="Html">
      <p class="course-label">Html</p>
    </div>
    <div class="images">
      <img src="https://hype.codes/sites/default/files/icons_for_articles/red/ruby_on_rails.png" alt="Ruby on Rails">
      <p class="course-label">Ruby on Rails</p>
    </div>
    <div class="images">
      <img src="https://www.cbronline.com/wp-content/uploads/2016/07/C.png" alt="C++">
      <p class="course-label">C++</p>
    </div>
     </div>
  </div>
<div>
  <iframe width="718" height="404"
          id="video" src="https://www.youtube.com/embed/UcRtFYAz2Yo" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

  

1 当且仅当：      

..

     
      
  • 均属于垂直相邻的框边，即形成以下对之一：      
        
    • 盒子的上边距和第一个流入子元素的上边距 ref
      •   
    •   
     

...

2 ：https://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-height

相关问题
最新问题