为什么我的网站页面中有一些文字隐藏在粘性导航栏后面

编程问答 2022-05-22

问题描述

内容与导航栏重叠。我没有为这个导航栏使用引导程序。我不希望我的内容在我的粘性导航栏下。所以我需要在我的导航栏下方对齐内容。我试过了，但我不能。任何人都可以告诉我为什么会发生这种情况吗？代码如下：

Ps.我是 css、html 的新手，感谢您的帮助

* {
  margin: 0;
  padding: 0;
  Box-sizing: border-Box;
}

::selection{
  background: rgb(0,123,255,0.3);
}
.content{
  max-width: 1250px;
  margin: auto;
  padding: 0 30px;
  margin-left: 10%;
  margin-right: 10%;
}
.navbar{
  padding-top: 85px;
  padding-bottom: 30px;
  background: #ffffff;
  position: fixed;
  width: 100%;
  z-index: 2;
  transition: all 0.3s ease;
}
.navbar.sticky{

  background: #ffffff;
  padding: px 0;
  Box-shadow: 0px 3px 5px 0px rgba(0,0.1);
}
.navbar .content{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.navbar .logo a{
  color: rgb(255,0);
  font-size: 30px;
  text-decoration: none;
}
.navbar .menu-list{
  display: inline-flex;
}
.menu-list li{
  list-style: none;
}
.menu-list li a{
  color: rgb(255,0);

  margin-left: 25px;
  text-decoration: none;
  transition: all 0.3s ease;
}
.menu-list li a:hover{
  color: #007bff;
}
.icon{
  color: rgb(255,0);
  font-size: 20px;
  cursor: pointer;
  display: none;
}
.menu-list .cancel-btn{
  position: absolute;
  right: 100px;
  top: 80px;
}
@media (max-width: 1230px) {
  .content{
    padding: 0 60px;
  }
}
@media (max-width: 1100px) {
  .content{
    padding: 0 40px;
  }
}
@media (max-width: 900px) {
  .content{
    padding: 0 40px;
  }
}
@media (max-width: 868px) {
  body.disabled{
    overflow: hidden;
  }
  .icon{
    display: block;
  }
  .icon.hide{
    display: none;
  }
  .navbar .menu-list{
    position: fixed;
    height: 100vh;
    width: 100%;
    max-width: 100%;
    right: -100%;
    top: 0px;
    display: block;
    padding: 40px 0;
    text-align: center;
    background: rgb(255,255);
    transition: all 0.3s ease;
  }
  .navbar.show .menu-list{
    right: 0%;
  }
  .navbar .menu-list li{
    margin-top: 45px;
  }
  .navbar .menu-list li a{
    font-size: px;
    margin-right: -100%;
    transition: 0.6s cubic-bezier(0.68,-0.55,0.265,1.55);
  }
  .navbar.show .menu-list li a{
    margin-right: 0px;
  }
}
@media (max-width: 380px) {
  .navbar .logo a{
    font-size: px;
  }
}
.about{
  padding: 30px 0;
}
.about .title{
  font-size: 38px;
  font-weight: 700;
}
.about p{
  padding-top: 20px;
  text-align: justify;
}
<body>
  <nav class="navbar">
    <div class="content">
      <div class="logo">
        <a href="#"><img src="https://pbs.twimg.com/media/EkoGzBLUUAEc9Wj.jpg" width="100" height="100" alt="" /></a>
      </div>
      <ul class="menu-list">
        <div class="icon cancel-btn">
          <i class="fas fa-times"></i>
        </div>
        <li><a href="m.html">Mo</a></li>
        <li><a href="a.html">Ad</a></li>     
        <li><a href="a.html">An</a></li>
        <li><a href="ots.html">Others</a></li>
        <li><a href="ab.html">About</a></li>
      </ul>
      <div class="icon menu-btn">
        <i class="fas fa-bars"></i>
      </div>
    </div>
  </nav>
  <div class="about">
    <div class="content">
      <div class="title">Responsive Sticky Navigation Menu Bar on Scroll using HTML CSS & JavaScript</div>
      <p>Lorem ipsum dolor sit amet,consectetur adipisicing elit. Quo impedit atque consequatur! Iusto distinctio temporibus repellendus labore odit adipisci harum ipsa beatae natus,eum eius,hic aperiam odio! Quasi molestias magnam illo voluptatem iusto ipsam blanditiis,tempore cumque reiciendis quaerat vero tenetur,sequi dolores libero voluptas vitae voluptate placeat dolorum modi ipsa nisi repellat facilis aliquam asperiores. Aut nam repellat harum quas SAEpe dolorum voluptates ratione,itaque consectetur explicabo a facilis rem mollitia maxime repudiandae fuga reprehenderit,odio cum incidunt labore molestiae quis non perferendis ipsam. Illum,in,deserunt. Ipsa.</p>

      <p>Lorem ipsum dolor sit amet,consectetur adipisicing elit. Sint doloremque perspiciatis voluptate ducimus reiciendis rem expedita voluptatibus dicta harum,quo,aspernatur maiores possimus officia quod? Aliquid molestiae illo sequi,tempora perferendis at incidunt nam porro voluptatibus,iste aperiam blanditiis adipisci ducimus repellendus distinctio nostrum ipsum! Voluptas facilis cum,atque tempora magnam beatae sequi! Doloribus expedita,cupiditate quo quod nemo aliquam,mollitia cum ea nam ullam soluta temporibus! Repudiandae incidunt consequatur distinctio deleniti obcaecati sit facilis unde,quisquam veniam ad doloribus!</p>
     
  </div>

</body>

解决方法

将 position: fixed 中的 position: sticky 更改为 .navbar 并添加 top: 0 以告诉它需要保持领先。 https://developer.mozilla.org/en-US/docs/Web/CSS/position

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

::selection{
  background: rgb(0,123,255,0.3);
}
.content{
  max-width: 1250px;
  margin: auto;
  padding: 0 30px;
  margin-left: 10%;
  margin-right: 10%;
}
.navbar{
  padding-top: 85px;
  padding-bottom: 30px;
  background: #ffffff;
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 2;
  transition: all 0.3s ease;
}
.navbar.sticky{

  background: #ffffff;
  padding: px 0;
  box-shadow: 0px 3px 5px 0px rgba(0,0.1);
}
.navbar .content{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.navbar .logo a{
  color: rgb(255,0);
  font-size: 30px;
  text-decoration: none;
}
.navbar .menu-list{
  display: inline-flex;
}
.menu-list li{
  list-style: none;
}
.menu-list li a{
  color: rgb(255,0);

  margin-left: 25px;
  text-decoration: none;
  transition: all 0.3s ease;
}
.menu-list li a:hover{
  color: #007bff;
}
.icon{
  color: rgb(255,0);
  font-size: 20px;
  cursor: pointer;
  display: none;
}
.menu-list .cancel-btn{
  position: absolute;
  right: 100px;
  top: 80px;
}
@media (max-width: 1230px) {
  .content{
    padding: 0 60px;
  }
}
@media (max-width: 1100px) {
  .content{
    padding: 0 40px;
  }
}
@media (max-width: 900px) {
  .content{
    padding: 0 40px;
  }
}
@media (max-width: 868px) {
  body.disabled{
    overflow: hidden;
  }
  .icon{
    display: block;
  }
  .icon.hide{
    display: none;
  }
  .navbar .menu-list{
    position: fixed;
    height: 100vh;
    width: 100%;
    max-width: 100%;
    right: -100%;
    top: 0px;
    display: block;
    padding: 40px 0;
    text-align: center;
    background: rgb(255,255);
    transition: all 0.3s ease;
  }
  .navbar.show .menu-list{
    right: 0%;
  }
  .navbar .menu-list li{
    margin-top: 45px;
  }
  .navbar .menu-list li a{
    font-size: px;
    margin-right: -100%;
    transition: 0.6s cubic-bezier(0.68,-0.55,0.265,1.55);
  }
  .navbar.show .menu-list li a{
    margin-right: 0px;
  }
}
@media (max-width: 380px) {
  .navbar .logo a{
    font-size: px;
  }
}
.about{
  padding: 30px 0;
}
.about .title{
  font-size: 38px;
  font-weight: 700;
}
.about p{
  padding-top: 20px;
  text-align: justify;
}
<body>
  <nav class="navbar">
    <div class="content">
      <div class="logo">
        <a href="#"><img src="https://pbs.twimg.com/media/EkoGzBLUUAEc9Wj.jpg" width="100" height="100" alt="" /></a>
      </div>
      <ul class="menu-list">
        <div class="icon cancel-btn">
          <i class="fas fa-times"></i>
        </div>
        <li><a href="m.html">Mo</a></li>
        <li><a href="a.html">Ad</a></li>     
        <li><a href="a.html">An</a></li>
        <li><a href="ots.html">Others</a></li>
        <li><a href="ab.html">About</a></li>
      </ul>
      <div class="icon menu-btn">
        <i class="fas fa-bars"></i>
      </div>
    </div>
  </nav>
  <div class="about">
    <div class="content">
      <div class="title">Responsive Sticky Navigation Menu Bar on Scroll using HTML CSS & JavaScript</div>
      <p>Lorem ipsum dolor sit amet,consectetur adipisicing elit. Quo impedit atque consequatur! Iusto distinctio temporibus repellendus labore odit adipisci harum ipsa beatae natus,eum eius,hic aperiam odio! Quasi molestias magnam illo voluptatem iusto ipsam blanditiis,tempore cumque reiciendis quaerat vero tenetur,sequi dolores libero voluptas vitae voluptate placeat dolorum modi ipsa nisi repellat facilis aliquam asperiores. Aut nam repellat harum quas saepe dolorum voluptates ratione,itaque consectetur explicabo a facilis rem mollitia maxime repudiandae fuga reprehenderit,odio cum incidunt labore molestiae quis non perferendis ipsam. Illum,in,deserunt. Ipsa.</p>

      <p>Lorem ipsum dolor sit amet,consectetur adipisicing elit. Sint doloremque perspiciatis voluptate ducimus reiciendis rem expedita voluptatibus dicta harum,quo,aspernatur maiores possimus officia quod? Aliquid molestiae illo sequi,tempora perferendis at incidunt nam porro voluptatibus,iste aperiam blanditiis adipisci ducimus repellendus distinctio nostrum ipsum! Voluptas facilis cum,atque tempora magnam beatae sequi! Doloribus expedita,cupiditate quo quod nemo aliquam,mollitia cum ea nam ullam soluta temporibus! Repudiandae incidunt consequatur distinctio deleniti obcaecati sit facilis unde,quisquam veniam ad doloribus!</p>
     
  </div>

</body>

htmljavascript

相关问答

Selenium Web驱动程序和Java元素在(x，y)点处不可单击其他元素将获得点击?
Selenium Web驱动程序和Java。元素在(x，y)点处不可单击。其...
Python-如何使用点“” 访问字典成员？
Python-如何使用点“。” 访问字典成员？
Java 字符串是不可变的到底是什么意思？
Java 字符串是不可变的。到底是什么意思？
Java中的“ final”关键字如何工作？我仍然可以修改对象
Java中的“ final”关键字如何工作？（我仍然可以修改对象。...
“loop:”在Java代码中这是什么，为什么要编译？
“loop:”在Java代码中。这是什么，为什么要编译？
java.lang.ClassNotFoundException：sun.jdbc.odbc.JdbcOdbcDriver发生异常为什么？
java.lang.ClassNotFoundException：sun.jdbc.odbc.JdbcOdbc...