Question

我正在尝试创建一个最固定的导航，该导航应该始终可见并在需要时覆盖内容。但是，经过几次尝试，我得到了the following result.，我想摆脱这种对导航栏的“透明”效果。

@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并在content div中添加margin-top，但这并没有成功。我在做什么错，我该如何解决？固定位置有什么具体规定吗？

Answer 1

如果您希望它不透明，则需要给它一个<body> <p>Write something in the text field to trigger a function.</p> <input type="text" id="funcnTest" oninput="multiple()"> <p id="myOutput"></p> <script> function multiple() { var myInputVal = document.getElementById("funcnTest").value; document.getElementById("myOutput").innerHTML = "The value: " + myInputVal; } </script> </body>。另外，由于它位于其余内容之前，因此当它们重叠时，其余内容将位于其上方。要将其置于上方，请给它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; }计算中包括padding来防止顶栏超过文档的宽度：

width

在此处查看：https://codepen.io/andrei-gheorghiu/pen/KbbmmG

Answer 2

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

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

@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;
}

Answer 3

我认为您正在寻找background-color属性。

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

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

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

3 个答案: