Question

/* 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样式重置为溢出：自动。它显示为位置：相对而不是位置：粘性

Answer 1

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

您可以将div（在body的下面）制成div style="height: 1000px;"吗？

就我而言，这种样式效果很好。

Answer 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>

Answer 3

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

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

如果无论滚动如何，导航都应该停留在最上面，那么您很可能希望使用position：absolute代替

HTML5位置粘滞无法工作，尽管我设置了前0

3 个答案: