Question

我正在设计一个非常简单的静态博客页面，其中包含HTML5，SASS＆amp; CSS。

虽然我已经使用过＆＃39; nav＆＃39;语义（对于页面顶部的固定栏，以便无论你滚动的页面有多低，它都会保留）和标题＆＃39;语义（对于文章上方和“导航”下方的更多标题），当我扩展“标题”时，将它们分开。最高保证金，＆＃39; nav＆＃39;以相同的增量下降。为什么？如何让导航器保持稳定，固定在顶部？

基本上，我的目标是获得＆＃39;标题＆＃39;从“导航”下面出来，所以如果有更好的方法，我全都听见了。

＆＃13;

body {
    height: 2000px;
    font-family: helvetica;
} 

nav {
    background: #FFE599;
    height: 30px;
    width: 100%;
    position: fixed;
    border-bottom: 2px solid black;
}

nav p {
    margin: 7px auto;
    margin-left: 10px;
}

header {
    background: #B6D7A8;
    border: 2px solid black;
    border-radius: 10px;
    text-align: center;
    height: 50px;
    width: 760px;
    margin: 50px 10px 20px 10px;
}

＆＃13;

<nav>
  <p>The Lorem Micro Blog</p>
</nav>
<main class="blog-width">
  <aside id="left-side">
    <h2>Check out my vertically centered ad!</h2>
    <img src="href" alt="" />
  </aside>
  <div class="content">
    <header>
      <h1>The Lorem Micro Blog</h1>
      <p>By Foo Bar</p>
    </header>
  </div>
</main>

＆＃13;

Answer 1

你的HTML不正确

如果您想要在顶部修复导航，则需要添加top:0;，对于标题，它应该在导航标记之外，并且您应该始终在顶部添加间隙等于高度固定在顶部的导航，以便您可以看到顶部内容

请参阅以下代码：

body {
      height: 2000px;
      font-family: helvetica;
      padding-top: 30px;
    }
    
    nav {
      background: #FFE599;
      height: 30px;
      width: 100%;
      position: fixed;
      top:0;
      border-bottom: 2px solid black;
    }
    
    nav p {
      margin: 7px auto;
      margin-left: 10px;
    }
    
    header {
      background: #B6D7A8;
      border: 2px solid black;
      border-radius: 10px;
      text-align: center;
      height: 50px;
      width: 760px;
      margin: 50px 10px 20px 10px;
    }

    <nav>
      <p>The Lorem Micro Blog</p>
    </nav>
    <aside id="left-side">
      <h2>Check out my vertically centered ad!</h2>
      <img src="" alt="">
    </aside>
    <div class="content">
      <header>
        <h1>The Lorem Micro Blog</h1>
        <p>By Foo Bar</p>
      </header>
    </div>

Answer 2

您需要为top: 0;元素指定nav，并为margin-top元素添加一些main：

＆＃13;

body {
  height: 2000px;
  font-family: helvetica;
}
nav {
  background: #FFE599;
  height: 30px;
  width: 100%;
  position: fixed;
  border-bottom: 2px solid black;
  top: 0;
}
nav p {
  margin: 7px auto;
  margin-left: 10px;
}
main {
  margin-top: 35px; 
}
header {
  background: #B6D7A8;
  border: 2px solid black;
  border-radius: 10px;
  text-align: center;
  height: 50px;
  width: 760px;
  margin: 50px 10px 20px;
}

＆＃13;

<nav>
  <p>The Lorem Micro Blog</p>
</nav>
<main class="blog-width">
  <aside id="left-side">
    <h2>Check out my vertically centered ad!</h2>
    <img src="href" alt="" />
  </aside>
  <div class="content">
    <header>
      <h1>The Lorem Micro Blog</h1>
      <p>By Foo Bar</p>
    </header>
  </div>
</main>

＆＃13;

在css中，当我扩展主要内容的上边距时，我的固定顶部导航部分边距随主要内容一起下降

2 个答案: