固定顶部导航不覆盖页面内容

Question

我正在尝试创建一个顶部固定导航，它应该始终可见并在需要时覆盖内容。但是，经过几次尝试后，我 the following result. 我想摆脱导航栏上的这种 "transparency" 效果。

@import url("https://fonts.googleapis.com/css?family=Montserrat+Alternates:400,800|Poppins");
.nav-title {
  font-family: 'Montserrat Alternates', sans-serif;
  font-weight: 800;
  font-size: 1.5rem;
}

#mobile-nav {
  height: 3.8rem;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 1rem;
  box-shadow: 0px 1px 10px black;
}
#mobile-nav i {
  font-size: 3rem;
}

#content {
  margin-top: 4rem;
}

#start {
  height: 50vh;
  width: 100%;
  font-family: 'Poppins', sans-serif;
  text-align: center;
}
#start h1 {
  position: relative;
  top: 25%;
  font-size: 2.3rem;
  margin: 0 1rem;
}

#info {
  height: 100vh;
  width: 100%;
  font-family: 'Poppins', sans-serif;
  margin: 0 auto;
  text-align: c;
}
#info p {
  margin: 0 50px;
}
#info h2 {
  text-align: center;
}

.fixed-top {
  position: fixed;
  top: 0;
}

<header>
  <nav id="mobile-nav" class="fixed-top">
    <div class="nav-title">Some logo</div>
    <i class="material-icons">menu</i>
  </nav>
</header>

<div id="content">
  <section id="start">
    <h1>This is an<br />awesome header.</h1>
  </section>
  <section id="info">
    <h2>And this is another header.</h2>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum condimentum nibh vel eros porttitor semper. Sed sit amet porttitor velit, sed malesuada orci. Nam nec gravida quam. Proin eget tristique quam. Nam posuere massa magna. Aenean congue
      sed enim id tempus. Etiam sed est in arcu facilisis auctor sit amet nec eros. Duis cursus molestie quam, quis blandit ex eleifend vitae. Quisque efficitur leo at magna ornare, vitae aliquam ante interdum. Nullam eget consectetur arcu. Suspendisse
      sit amet tincidunt dui, sit amet placerat nunc. Sed posuere, lacus quis pellentesque interdum, dui nulla molestie est, vel condimentum enim quam in ex.</p>

到目前为止，我已经尝试了 z-index 并向内容添加 margin-top div 但这并没有成功。我做错了什么，我该如何解决？ position fixed有什么具体的事情吗？

Answer 1

如果你想让它不透明，你需要给它一个background-color。此外，因为它在其余内容之前，所以当它们重叠时，其余内容将在其上方。把它放在上面，给它 z-index: 1;

.fixed-top {
  position: fixed;
  top: 0;
  background-color: white;
  z-index: 1
}

另一种方法是将滚动条从 body 移动到 #content，这将不再允许它们重叠（在这种情况下您不再需要上面的内容）。它还具有不在菜单顶部呈现滚动条的优点：

#content {
  margin-top: 4rem;
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
}

最后，您应该告诉它在其总 width 计算中包含 padding 以防止顶部栏超过文档的宽度：

#mobile-nav {
  box-sizing: border-box;
}

在这里查看：https://codepen.io/andrei-gheorghiu/pen/KbbmmG

Answer 2

我为您的导航栏添加了背景颜色，并设置了 z-index 高于您的内容和 headers。

@import url("https://fonts.googleapis.com/css?family=Montserrat+Alternates:400,800|Poppins");
.nav-title {
  font-family: 'Montserrat Alternates', sans-serif;
  font-weight: 800;
  font-size: 1.5rem;
}

#mobile-nav {
  height: 3.8rem;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 1rem;
  box-shadow: 0px 1px 10px black;
  background-color:#ffffff;
}
#mobile-nav i {
  font-size: 3rem;
}

#content {
  margin-top: 4rem;
}

#start {
  height: 50vh;
  width: 100%;
  font-family: 'Poppins', sans-serif;
  text-align: center;
}
#start h1 {
  position: relative;
  top: 25%;
  font-size: 2.3rem;
  margin: 0 1rem;
  z-index:90;
}

#info {
  height: 100vh;
  width: 100%;
  font-family: 'Poppins', sans-serif;
  margin: 0 auto;
  text-align: c;
}
#info p {
  margin: 0 50px;
}
#info h2 {
  text-align: center;
}

.fixed-top {
  position: fixed;
  z-index:100;
  top: 0;
}

<header>
  <nav id="mobile-nav" class="fixed-top">
    <div class="nav-title">Some logo</div>
    <i class="material-icons">menu</i>
  </nav>
</header>

<div id="content">
  <section id="start">
    <h1>This is an<br />awesome header.</h1>
  </section>
  <section id="info">
    <h2>And this is another header.</h2>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum condimentum nibh vel eros porttitor semper. Sed sit amet porttitor velit, sed malesuada orci. Nam nec gravida quam. Proin eget tristique quam. Nam posuere massa magna. Aenean congue
      sed enim id tempus. Etiam sed est in arcu facilisis auctor sit amet nec eros. Duis cursus molestie quam, quis blandit ex eleifend vitae. Quisque efficitur leo at magna ornare, vitae aliquam ante interdum. Nullam eget consectetur arcu. Suspendisse
      sit amet tincidunt dui, sit amet placerat nunc. Sed posuere, lacus quis pellentesque interdum, dui nulla molestie est, vel condimentum enim quam in ex.</p>

Answer 3

我认为 background-color 属性是您要找的。

您可以尝试在 #mobile-nav 中添加以下行：

  background-color: white;
  z-index: 100; // or any other huge value

固定顶部导航不覆盖页面内容

Fixed top nav doesn't overlay page content

html

css

layout

css-position

navbar