HTML5 Position Sticky 无法正常工作，尽管我设置了前 0 [重复]答案

【问题标题】：HTML5 Position Sticky Couldn't work although i had set top 0 [duplicate]HTML5 Position Sticky 无法正常工作，尽管我设置了前 0 [重复]
【发布时间】：2018-11-21 16:52:07
【问题描述】：

/* site navigation bar */

nav.sitenavigation {
  position: sticky;
  top: 0;
  clear: both;
  text-align: center;
  color: #000000;
  font-size: 1.4em;
  background-color: #f0f8ff;
  margin: 50px auto;
}

nav.sitenavigation p {
  display: inline-block;
  margin: 0.5em;
  padding-right: 5em;
}

nav.sitenavigation a:link,
nav.sitenavigation a:visited {
  text-decoration: none;
  color: #000000;
}

nav.sitenavigation a:hover,
nav.sitenavigation a:focus {
  color: #33cc00;
}
p{
margin: 2000px;
}

<body>
  <div>
    <nav class="sitenavigation">
      <p><a href="index.html">&#127968; Home</a></p>
      <p><a href="listing.html">&#x1f4d6; Item Listing</a></p>
      <p><a href="order.html">&#128722; Your Order</a></p>
      <p><a href="contactus.html">&#x260E; Contact Us</a></p>
    </nav>
  </div>
  <p>ABC
  </p>
</body>

我尝试了很多方法来让我的导航栏保持在顶部，但事实并非如此。我已将 HTML 样式重置为溢出：自动。它显示为 position: relative 而不是 position: sticky

【问题讨论】：

sn-p 没有说明问题。但是position:sticky 使元素只有在其父元素在屏幕上可见时才具有粘性。例如，我制作了this fiddle，它显示只要某些 div 内容可见，粘性就可以正常工作，但之后它会随着 div 向上滚动。你的情况是这样吗？
它根本不会粘在上面。
去掉导航周围的 div 就可以了
@MrLister 在他的代码中有一个额外的 div 会产生问题，该元素粘在该 div 上，但 div 的高度也由粘性元素定义，因此没有空间粘性效应。
@TemaniAfif 非常感谢。这是 div 导致导航中的粘性不起作用

标签： html css

【解决方案1】：

position: sticky 在高度足够长时起作用。

你能把div（就在下面的body）变成div style="height: 1000px;"吗？

就我而言，这种风格效果很好。

【讨论】：

我添加了2000px的边距来演示问题

【解决方案2】：

设置相对容器的高度

/* site navigation bar */
body {height: 800rem;}
nav.sitenavigation {
    position: sticky;
    top: 0;
    clear: both;
    text-align: center;
    color: #000000;
    font-size: 1.4em;
    background-color: #f0f8ff;
    margin: 50px auto;
}
nav.sitenavigation p{
     display: inline-block;
     margin: 0.5em;
     padding-right: 5em;
}
nav.sitenavigation a:link, nav.sitenavigation a:visited{
     text-decoration: none;
     color: #000000;
}
nav.sitenavigation a:hover, nav.sitenavigation a:focus{
     color: #33cc00;
}

<body>

        <nav class="sitenavigation">
                <p><a href="index.html">&#127968; Home</a></p>
                <p><a href="listing.html">&#x1f4d6; Item Listing</a></p>
                <p><a href="order.html">&#128722; Your Order</a></p>
                <p><a href="contactus.html">&#x260E; Contact Us</a></p>
        </nav>

      </body>

【讨论】：

【解决方案3】：

根据定义，您看到的相对位置是正确的：

粘性元素在相对和固定之间切换，具体取决于滚动位置。它是相对定位的，直到给定的偏移量位置在视口中遇到 - 然后它“粘”在适当的位置（如位置：固定）。 https://www.w3schools.com/Css/css_positioning.asp

如果您的导航应该固定在顶部，无论滚动如何，您很可能希望使用 position: absolute 来代替

【讨论】：