无法让“位置：粘性”在我的导航栏上工作。任何帮助表示赞赏[重复]答案

【问题标题】：Can't get "position: sticky" to work on my navbar. Any help is appreciated [duplicate]无法让“位置：粘性”在我的导航栏上工作。任何帮助表示赞赏[重复]
【发布时间】：2021-10-03 06:23:53
【问题描述】：

我一直在沮丧地试图让“粘性”CSS 属性在我的导航栏上工作，但不知道如何操作。一开始我以为是flexbox，所以我把它都去掉了，还是不行。然后我认为这可能是一个孩子父母的问题，但在以这种方式进行故障排除后仍然无法让它工作。我也不想使用 position: fixed ，因为据我所知，它通过将其放在其他内容的顶部来切断其他内容的顶部。与粘性不同。任何帮助将不胜感激。

@import url('https://fonts.googleapis.com/css2?family=Stick+No+Bills:wght@600&display=swap');
* {
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica;
  padding: 0px;
  margin: 0px;
}

.main-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  height: 7vh;
  padding: 10px;
  background-color: #ffffff;
  position: sticky;
  top: 0;
  font-family: sans-serif;
}

.main-nav ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0px;
  padding: 0px;
  list-style-type: none;
  font-size: 17px;
}

.main-nav a {
  color: inherit;
  padding: 0;
  text-decoration: none;
  padding: 1rem;
}

.main-nav .nav-right {
  justify-items: right;
}

.main-nav li:hover {
  color: rgba(0, 0, 0, 0.5);
}

.header-container {
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgb(161, 117, 63);
  background: linear-gradient(90deg, rgba(161, 117, 63, 1) 0%, rgba(192, 139, 74, 1) 50%, rgba(161, 117, 63, 1) 100%);
  width: 100%;
  height: 50vh;
  border-top: 2px solid black;
  border-bottom: 2px solid black;
}

.header-content {
  color: rgb(255, 255, 255);
  font-size: 125px;
  position: absolute;
  white-space: nowrap;
  font-family: 'Stick No Bills', sans-serif;
  text-decoration: underline;
}

.header-content-subheading {
  position: relative;
  display: inline;
  padding-top: 175px;
  font-size: 17px;
  font-family: monospace;
}

.tracking-in-expand {
  -webkit-animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
  animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}

@keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}

@media (max-width: 600px) {
  .header-content {
    font-size: 110px;
  }
}

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" type="text/css" href="homepageStyle.css">
  <title>Iron Wood</title>
</head>

<body>
  <header>
    <nav class="main-nav">
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="shop.html">Shop</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.html">Contact</a></li>
        <li><a href="#"><i class="fa fa-shopping-cart"></a></i>
        </li>
      </ul>
    </nav>
  </header>
  <div class="header-container">
    <div class="header-content tracking-in-expand">Iron Wood</div>
    <div class="header-content-subheading">Custom Woodworking</div>
  </div>
</body>

【问题讨论】：

<header>标签是必须有class="main-nav"的元素。

标签： html css css-position

【解决方案1】：

将粘性代码添加到 header 元素中。

顺便说一句，很酷的文字动画。

@import url('https://fonts.googleapis.com/css2?family=Stick+No+Bills:wght@600&display=swap');
* {
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica;
  padding: 0px;
  margin: 0px;
  min-height: 300vh;
}

header {
  z-index: 100;
  position: sticky;
  top: 0;
}

.main-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  height: 7vh;
  padding: 10px;
  background-color: #ffffff;
  font-family: sans-serif;
}

.main-nav ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0px;
  padding: 0px;
  list-style-type: none;
  font-size: 17px;
}

.main-nav a {
  color: inherit;
  padding: 0;
  text-decoration: none;
  padding: 1rem;
}

.main-nav .nav-right {
  justify-items: right;
}

.main-nav li:hover {
  color: rgba(0, 0, 0, 0.5);
}

.header-container {
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgb(161, 117, 63);
  background: linear-gradient(90deg, rgba(161, 117, 63, 1) 0%, rgba(192, 139, 74, 1) 50%, rgba(161, 117, 63, 1) 100%);
  width: 100%;
  height: 50vh;
  border-top: 2px solid black;
  border-bottom: 2px solid black;
}

.header-content {
  color: rgb(255, 255, 255);
  font-size: 125px;
  position: absolute;
  white-space: nowrap;
  font-family: 'Stick No Bills', sans-serif;
  text-decoration: underline;
}

.header-content-subheading {
  position: relative;
  display: inline;
  padding-top: 175px;
  font-size: 17px;
  font-family: monospace;
}

.tracking-in-expand {
  -webkit-animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
  animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}

@keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}

@media (max-width: 600px) {
  .header-content {
    font-size: 110px;
  }
}

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" type="text/css" href="homepageStyle.css">
  <title>Iron Wood</title>
</head>

<body>
  <header>
    <nav class="main-nav">
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="shop.html">Shop</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.html">Contact</a></li>
        <li><a href="#"><i class="fa fa-shopping-cart"></a></i>
        </li>
      </ul>
    </nav>
  </header>
  <div class="header-container">
    <div class="header-content tracking-in-expand">Iron Wood</div>
    <div class="header-content-subheading">Custom Woodworking</div>
  </div>
</body>

【讨论】：

成功了！谢谢！！非常感谢您的帮助。也不得不承认这不是我的自定义动画，只是我从一个 CSS 动画网站上拿来的东西。如果有人想看图书馆，链接是here。超级好用。

【解决方案2】：

position: sticky 有效，但它不可见，因为它是

相对于它最近的滚动祖先
https://developer.mozilla.org/en-US/docs/Web/CSS/position

它是header。

两种选择

1.在main-nav上，可以用position: fixed代替sticky：

.main-nav {
    position: fixed;
    width: 100%;
    z-index: 999;
}

2. 或将position: sticky 移动到header 上，这样会影响body 元素：

header {
  position: sticky;
  top: 0
  z-index: 1;
 }

【讨论】：