为什么 CSS 位置固定属性不起作用？答案

【问题标题】：Why CSS Position Fixed Property doesn't work?为什么 CSS 位置固定属性不起作用？
【发布时间】：2022-09-23 09:18:57
【问题描述】：

我试图让导航栏固定，以便当我滚动导航栏时保持固定。但实际上，当我滚动导航栏时，导航栏会上升并且不会保持固定。请在这个问题上帮助我。我正在分享我正在尝试的源代码。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
h1 {
  margin: 1rem;
}

ul {
  position: fixed;
  width: 100vw;
  padding-top: 5px;
  list-style-type: none;
  background-color: #333333;
  height: 40px;
}

li {
  display: block;
  float: left;
  font-size: 1.25rem;
}

a {
  text-decoration: none;
  color: white;
  padding: 12px;
}

a:hover:not(.home) {
  background-color: #111111;
}

.home {
  background-color: #04aa6d;
}

main {
  position: absolute;
  top: 40px;
  background-color: #1abc9c;
  width: 100vw;
}

<body>
    <header>
      <ul>
        <li><a class=\"home\" href=\"\">Home</a></li>
        <li><a href=\"\">News</a></li>
        <li><a href=\"\">Contact</a></li>
        <li><a href=\"\">About</a></li>
      </ul>
    </header>
    <main>
      <h1>Fixed Top Navigation Bar</h1>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
    </main>
  </body>

这是代码。现在请让我知道如何修复标题/导航栏内容，以便当我滚动标题/导航栏时将保持固定。注意：我刚刚开始我的 HTML 和 CSS，所以我可能会犯很多错误。请给我适当的解释，以便我可以从您的回答中学习。谢谢阿都阿利姆

标签： html css position css-position

【解决方案1】：

添加 z-index 属性

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
h1 {
  margin: 1rem;
}

ul {
  position: fixed;
  width: 100vw;
  padding-top: 5px;
  list-style-type: none;
  background-color: #333333;
  height: 40px;
  z-index: 99;
}

li {
  display: block;
  float: left;
  font-size: 1.25rem;
}

a {
  text-decoration: none;
  color: white;
  padding: 12px;
}

a:hover:not(.home) {
  background-color: #111111;
}

.home {
  background-color: #04aa6d;
}

main {
  position: absolute;
  top: 40px;
  background-color: #1abc9c;
  width: 100vw;
}

  <body>
    <header>
      <ul>
        <li><a class="home" href="">Home</a></li>
        <li><a href="">News</a></li>
        <li><a href="">Contact</a></li>
        <li><a href="">About</a></li>
      </ul>
    </header>
    <main>
      <h1>Fixed Top Navigation Bar</h1>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
    </main>
  </body>

【讨论】：