Why doesn't position: sticky work on my header?

问题

I am using position: sticky; for my header, but it does not seem to work. The error is that the navigation bar doesn't stay in place when I scroll down, like it should with position: sticky set.

* {
  margin: 0px;
}

nav {
  width: 100%;
  background-color: white;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, .32);
}

#navigation {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
}

li {
  display: inline-block;
  padding: 0px;
  font-family: Antonio;
  font-size: 3em;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 2px;
  padding-bottom: 2px;
  margin-right: 2px;
}

li a {
  text-decoration: none;
  color: #33C4C4;
  transition: 0.5s;
}

li a:hover {
  color: black;
  transition: 0.5s;
}

#dropdown-other {
  display: none;
  z-index: 1;
  position: absolute;
  background-color: white;
  border: #33C4C4 1.5px solid;
  border-radius: 10px;
  margin-right: 5px;
}

#dropdown-other a {
  color: #33C4C4;
  text-decoration: none;
  display: block;
  font-size: 0.5em;
  text-align: center;
}

#dropdown-other a:hover {
  color: black;
}

#other:hover #dropdown-other {
  display: block;
}

@media (max-width: 790px) {
  .nav-section {
    display: none !important;
  }
  #expand {
    display: inline-block !important;
  }
  .overflowDropdown {
    display: block !important;
  }
}

<div>
  <nav style="position: sticky; position: -webkit-sticky; top: 0px; z-index: 10;">
    <a href="#">
      <img src="Images/logo.png" id="logo" title="LOGO" />
    </a>
    <ul align="right" id="navigation">
      <li><a class="nav-section" href="#" title="HOME PAGE">HOME</a></li>
      <li><a class="nav-section" href="#" title="SHOP PAGE">SHOP</a></li>
      <li><a class="nav-section" href="#" title="PEOPLE PAGE">PEOPLE</a></li>
      <li><a class="nav-section" href="#" title="ABOUT PAGE">ABOUT</a></li>
      <li id="other">
        <a href="#" title="OTHER PAGES">OTHER</a>
        <div id="dropdown-other">
          <div class="overflowDropdown">
            <a href="#">HOME</a>
            <a href="#">SHOP</a>
            <a href="#">PEOPLE</a>
            <a href="#">ABOUT</a>
          </div>
          <a href="#">CONTACT</a>
          <a href="#">FEED</a>
          <a href="#">BOARD</a>
          <a href="#">CHANGELOG</a>
        </div>
      </li>
    </ul>
  </nav>
</div>

<p style="margin-top: 700px;">test</p>

回答1:

That's because of the div enclosing it around. Your alternatives:

• Make the parent div sticky as demonstrated.
• Remove the div and the nav would be sticky (since no parent container).
• Take the nav out of the div if the div is required.

* {
  margin: 0px;
}

nav {
  width: 100%;
  background-color: white;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, .32);
  z-index: 10;
}

#navigation {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
}

li {
  display: inline-block;
  padding: 0px;
  font-family: Antonio;
  font-size: 3em;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 2px;
  padding-bottom: 2px;
  margin-right: 2px;
}

li a {
  text-decoration: none;
  color: #33C4C4;
  transition: 0.5s;
}

li a:hover {
  color: black;
  transition: 0.5s;
}

#dropdown-other {
  display: none;
  z-index: 1;
  position: absolute;
  background-color: white;
  border: #33C4C4 1.5px solid;
  border-radius: 10px;
  margin-right: 5px;
}

#dropdown-other a {
  color: #33C4C4;
  text-decoration: none;
  display: block;
  font-size: 0.5em;
  text-align: center;
}

#dropdown-other a:hover {
  color: black;
}

#other:hover #dropdown-other {
  display: block;
}

@media (max-width: 790px) {
  .nav-section {
    display: none !important;
  }
  #expand {
    display: inline-block !important;
  }
  .overflowDropdown {
    display: block !important;
  }
}

<div style="position: -webkit-sticky;position: sticky;top: 0px;">
  <nav>
    <a href="#">
      <img src="Images/logo.png" id="logo" title="LOGO" />
    </a>
    <ul align="right" id="navigation">
      <li><a class="nav-section" href="#" title="HOME PAGE">HOME</a></li>
      <li><a class="nav-section" href="#" title="SHOP PAGE">SHOP</a></li>
      <li><a class="nav-section" href="#" title="PEOPLE PAGE">PEOPLE</a></li>
      <li><a class="nav-section" href="#" title="ABOUT PAGE">ABOUT</a></li>
      <li id="other">
        <a href="#" title="OTHER PAGES">OTHER</a>
        <div id="dropdown-other">
          <div class="overflowDropdown">
            <a href="#">HOME</a>
            <a href="#">SHOP</a>
            <a href="#">PEOPLE</a>
            <a href="#">ABOUT</a>
          </div>
          <a href="#">CONTACT</a>
          <a href="#">FEED</a>
          <a href="#">BOARD</a>
          <a href="#">CHANGELOG</a>
        </div>
      </li>
    </ul>
  </nav>
</div>

<p style="margin-top: 700px;">test</p>

来源：https://stackoverflow.com/questions/48038799/why-doesnt-position-sticky-work-on-my-header