为什么当我将它设置为固定时我的标题会向下移动？

【问题标题】：Why does my header moves down when I set it fixed?为什么当我将它设置为固定时我的标题会向下移动？
【发布时间】：2019-04-12 10:42:02
【问题描述】：

在我的页眉中，我放置了页面的标题和导航栏，但是一旦我将其设置为 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>

【问题讨论】：

  • 尝试添加top:0；

标签： html css


【解决方案1】：

您正面临边距折叠问题。固定标题后，您将其从流程中删除，您的表单成为第一个流入元素，因此其上边距将与 body1 的上边距折叠。这意味着主体将具有较大的上边距，并且您的固定元素将根据主体进行定位，因为您没有设置任何 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：Why aren't my absolutely/fixed-positioned elements located where I expect?

【讨论】：

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2014-01-31
    • 1970-01-01
    • 1970-01-01
    • 2021-08-28
    • 1970-01-01
    • 2015-10-22
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode