为什么粘性位置不适用于我的导航？ [复制]答案

【问题标题】：Why position sticky is not working on my nav? [duplicate]为什么粘性位置不适用于我的导航？ [复制]
【发布时间】：2021-08-19 00:58:26
【问题描述】：

我尝试将位置粘性添加到我的导航类“header__div-nav”，但它似乎不起作用。我已尝试按照其他帖子的建议添加、显示父级的首字母，但没有结果。

现在这表现为静态而不是粘性。

body {
  font-family: "New Tegomin", serif;
  background-color: #ddd;
  margin-bottom: 5vh;
}

figcaption {
  display: none;
}

.header__div-nav {
  box-shadow: 0 4px 2px -2px gray;
  background-color: white;
  position: sticky;
  top: 0; /* required */
  width: 100%;
  z-index: 999;
}
.navbar__ul {
  margin: 0;
  padding: 0;
  height: 20vh;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.navbar__ul * {
  padding: 0 2vw;
  list-style-type: none;
  display: block;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Mac Miller</title>
  </head>
  <body>
    <header id="header">
      <div class="header__div-nav">
        <nav id="navbar">
          <ul class="navbar__ul">
            <li><a href="#tribute-info">About</a></li>
            <li><a href="#albums">Albums</a></li>
            <li><a href="#pics">Cool Pics</a></li>
          </ul>
        </nav>
      </div>
    </header>
    <main id="main">
      <div class="main__title_container">
        <h1 id="title">Mac Miller</h1>
      </div>
        <h2>About</h2>
        <p>
          Malcolm James McCormick (January 19, 1992 – September 7, 2018), known
          professionally as Mac Miller, was an American rapper, singer,
          songwriter, and record producer from Pittsburgh, Pennsylvania.
        </p>
    </main>
  </body>
</html>

【问题讨论】：

你怎么知道它不像sticky？
让我编辑帖子来演示一下，堆栈溢出不允许发布我所有的代码:(

标签： html css

【解决方案1】：

当一个具有position: sticky 样式的元素被包装，并且它是包装元素内的唯一元素时，这个被定义为 position: sticky 的元素将不会粘住。而不是.header__div-nav，请将position: sticky 添加到您的标题中

#header {
  position: sticky;
  top: 0;
}

【讨论】：