我是HTML/CSS的新手，正在构建一个简单的测试站点。目前，我正在努力使粘性定位工作。具体地说，我有一个标题/徽标区域，下面有一个工具栏。当你向下滚动时，我希望标题滚动离开，但工具栏滚动直到它到达页面的顶部，它将保留在那里。

我已经尝试删除所有的大小调整，填充，和边距。我读到高度调整会引起问题，所以我想我会尝试所有这些。我也没有溢出。我还试着在所有不同的元素上设置粘滞位置。它仍然不起作用，我不明白为什么。

如有任何建议，将不胜感激。谢谢！

我的代码：

null

h1 {
  background-color: lightblue;
  text-align: center;
}

.toolbar {
  border: 3px double black;
  background-color: coral;
  padding: 5px;
  text-align: center;
  width: 80%;
  max-width: 650px;
  margin: auto;
  position: sticky;
  top: 0px;
  margin: auto;
}

main {
  height: 200vh;
}

a {
  display: inline-block;
  color: black;
  background-color: lightblue;
  list-style-type: none;
  border: 1px solid black;
  width: 100px;
  font-size: 20px position:sticky;
}

a:link {
  text-decoration: none;
  color: red;
}

<header>
  <h1>Title Area</h1>
  <h2>"Awesome Tagline!"</h2>
  <hr>
</header>

<nav>
  <ul class="toolbar">
    <a href="">
      <li>Home</li>
    </a>
    <a href="">
      <li>About</li>
    </a>
    <a href="">
      <li>Menu</li>
    </a>
    <a href="">
      <li>Other</li>
    </a>
  </ul>
</nav>

<main></main>

null