修复了正文溢出的 CSSGrid 导航栏答案

【问题标题】：Fixed CSSGrid Navbar with Body overflowing修复了正文溢出的 CSSGrid 导航栏
【发布时间】：2019-09-16 08:14:14
【问题描述】：

我使用 CSSGrid 创建了一个固定的导航栏，但是在滚动时，正文会滚动到导航栏上方而不是下方。我认为它与指定的 Z 索引和位置有关，但不能完全弄清楚。
尝试了 Stack Overflow 上推荐的其他一些选项，但没有成功。

 <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

【问题讨论】：

尝试编写代码并保存订单。喜欢身体不应该带格子。而且我看到背景颜色是一个可行的解决方案:)
@Omer 谢谢！我认为你是对的。将 Body 的所有子元素包裹在一个单独的 div 中可能会更好，也许像“piyushjain”这样的 Wrapper 也提出了。

标签： html css navbar fixed

【解决方案1】：

您的 z-index 似乎没问题。

所以，在.navigationcss 规则下的css 中指定导航栏的颜色。

将以下规则添加到.navigation：

background: #ffff;

【讨论】：

哇，就这么简单。有效。非常感谢！

【解决方案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;
}

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

【讨论】：

您好，这个解决方案也很有效。非常感谢！