Question

我已经使用CSSGrid创建了一个固定的导航栏，但是在滚动时，主体会滚动到导航栏上方而不是其下方。我认为它与指定的Z索引和位置有关，但无法完全弄清楚。
尝试了此处建议的一些其他选项，但没有成功。

 <body class="container">
<div class="navigation">
  <img
    src="./img/test.svg"
    alt="Logo"
    class="navigation__logo"
  />
  <ul class="navigation__list-1">
    <li class="navigation__item">
      <a href="#" class="navigation__link">About Us</a>
    </li>
    <li class="navigation__item">
      <a href="#" class="navigation__link">Our Clients</a>
    </li>
    <li class="navigation__item">
      <a href="#" class="navigation__link">How we work</a>
    </li>
    <li class="navigation__item">
      <a href="#" class="navigation__link">Advantages</a>
    </li>
    <li class="navigation__item">
      <a href="#" class="navigation__link">Contact</a>
    </li>
  </ul>
  <ul class="navigation__list-2">
    <li class="navigation__registration">
      <a href="#" class="navigation__link">Register</a>
    </li>
    <li class="navigation__login">
      <a href="#" class="navigation__link">Login</a>
    </li>
    <!-- <li class="navigation__logout">Logout</li> -->
  </ul>
</div>
<div class="header">HEADER</div>
<main class="main">MAIN</main>
<footer class="footer">FOOTER</footer>

CSS样式（SCSS）

body {
  font-family: $font-ak-reg;
  color: $color-primary;
  font-weight: 300;
  font-size: 2.2rem;
  height: 1000px;
  position: relative;
  z-index: 1;
}

.container {
  display: grid;
  grid-template-rows: 9rem repeat(2, minmax(5rem, min-content));
  grid-template-columns: repeat(3, 1fr);
  row-gap: 3rem;
}

.navigation {
  // margin: 2rem;
  grid-row: 1 / 2;
  grid-column: 1 / -1;
  // background-color: aqua;

  display: grid;
  grid-template-columns: 20rem 1fr 65rem 1fr 20rem;
  box-shadow: 10px 3px 30px 0 rgba(74, 144, 226, 0.21);
  position: sticky;
  top: 0;
  z-index: 10;

感谢任何帮助。

Link to Codepen

Answer 1

您的z索引似乎还可以。

因此，在.navigation下的CSS中，css规则指定导航栏的颜色。

将以下规则添加到.navigation：

background: #ffff;

Answer 2

这是我的解决方法。

html：-

<div class="wrapper">
  <div class="header">HEADER</div>
  <main class="main">MAIN</main>
  <footer class="footer">FOOTER</footer>
</div>

css：-

.wrapper {
  background: #fff;
  z-index: 11;
}

如果您有疑问，请告诉我。

修复了CSSGrid导航栏带有主体溢出的问题

2 个答案: