顶部导航栏阻止了我的内容，我该如何解决？

时间：2021-07-31 23:27:49

标签： html css

我有一些问题，当我放一些段落或类似的东西时……导航栏被掩盖了。有人可以帮助我我的代码到底有什么问题吗？谢谢... 这是我的 html 代码

    <!DOCTYPE html>
    <html>
    <head>
        <title>SA-MR</title>
        <link rel="stylesheet" type="text/css" href="css/SAMRnavbar.css">
        <meta charset="utf-8">
    </head>
    <body>
    
    <!-- Navbar -->
        <nav>
          <div class="wrap">
          <div class="title">
                 <div class="kotakpersegi">
                    <a href="">
                        <img class="logo" src="img/logo.png" width="180" height="50">
                    </a>
                 </div>
          </div>
          <div class="tblmenubox">
            <div class="togel tblmenu">
    
            </div>
          </div>
          <div class="menu">
            <ul>
              <li><a href="#">Home</a></li>
              <li><a href="#">Contact</a></li>
              <li><a href="#">Service</a></li>
              <li><a href="#">Fiture</a></li>
              <li><a href="#">Maps</a></li>
            </ul>
          </div>
          </div>
        </nav>
        <script src="js/jquery.min.js"></script>
        <script type="text/javascript">
          $(".togel.tblmenu").click(function () {
          $(".menu").toggleClass("sh");
          });
        </script>
    <!-- Navbar -->
    
    
    </body>
    </html>

this my CSS code.

    body {
    margin: 0;
    background: #eff2f7;
}

a   {   

    left: -50;
  text-decoration: none;
  color: white;
  display: block;
  transition: 0.3s;
  font-size: 20px
}

a:hover {
  transition: 0.3s;
}

nav {
    position: fixed;
    top: 0;
    left: 20px;
    right: 0;
    background: #1e77b0;
    font-family: Palatino Linotype;
}

.title {
    display: inline-block;
    float: left;
    line-height: 50px;
}

.menu {
    display: inline-block;
    float: left;
}

.menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu ul li {
    display: inline-block;
}

.menu ul li a {
    padding: 0 50px;
    display: block;
    line-height: 50px;
}

.menu li:hover{
    background-color: #009cff;
}

.wrap{
  width: 95%;
  margin: 0 auto;
}

.tblmenubox {
    display: inline-block;
    float: right;
    line-height: 50px;
}

.tblmenu {
    display: block;
    position: absolute;
    width: 25px;
    height: 25px;
    background: #1e77b0;
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
}

.tblmenubox{
  display: none;
  visibility: hidden;
}


.kotakpersegi {
    display: block;
    position: absolute;
    left: -40px;
    width: 250px;
    height: 50px;
    background: #009cff;
    transform: translateY(-50%);
    -webkit-transform: skew(30deg);
    -moz-transform: skew(30deg);
    -o- transform: skew(30deg);
    transform: skew(30deg)
}

.logo {
    position: absolute;
    left: 50px;
}

@media screen and (max-width:1000px){

    .kotakpersegi {
        width: 150%;

    }

.logo {
    position: absolute;
    float: center;
    left: 25%;
}

  .menu{
    display: none;
  }
  .tblmenubox{
    display: block;
    visibility: visible;
  }
  .menu.sh {
    display: block;
    position: absolute;
    top: 50px;
    background: #1e77b0;
    width: 100%;
    left: 0;
}

.menu a:hover {
    color: #eff2f7;
    background: #009cff;
}

.menu ul li {
    display: block;
    text-align: center;
}
}

我一直在尝试像另一个一样向 65px 添加一些填充顶部，但是，我不起作用。我希望我能找到解决方案，谢谢大家...

1 个答案:

答案 0 :(得分：0)

问题是position: fixed，就像position: absolute一样，把元素从文档流中拉出来，所以它占用的区域不再占据任何空间。您可以在下面的示例中看到这一点，其中第一段被 <nav /> 遮挡：

$(".togel.tblmenu").click(function() {
  $(".menu").toggleClass("sh");
});
body {
  margin: 0;
  background: #eff2f7;
}

a {
  left: -50;
  text-decoration: none;
  color: white;
  display: block;
  transition: 0.3s;
  font-size: 20px
}

a:hover {
  transition: 0.3s;
}

nav {
  position: fixed;
  top: 0;
  left: 20px;
  right: 0;
  background: #1e77b0;
  font-family: Palatino Linotype;
}

.title {
  display: inline-block;
  float: left;
  line-height: 50px;
}

.menu {
  display: inline-block;
  float: left;
}

.menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu ul li {
  display: inline-block;
}

.menu ul li a {
  padding: 0 50px;
  display: block;
  line-height: 50px;
}

.menu li:hover {
  background-color: #009cff;
}

.wrap {
  width: 95%;
  margin: 0 auto;
}

.tblmenubox {
  display: inline-block;
  float: right;
  line-height: 50px;
}

.tblmenu {
  display: block;
  position: absolute;
  width: 25px;
  height: 25px;
  background: #1e77b0;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
}

.tblmenubox {
  display: none;
  visibility: hidden;
}

.kotakpersegi {
  display: block;
  position: absolute;
  left: -40px;
  width: 250px;
  height: 50px;
  background: #009cff;
  transform: translateY(-50%);
  -webkit-transform: skew(30deg);
  -moz-transform: skew(30deg);
  -o- transform: skew(30deg);
  transform: skew(30deg)
}

.logo {
  position: absolute;
  left: 50px;
}

@media screen and (max-width:1000px) {
  .kotakpersegi {
    width: 150%;
  }
  .logo {
    position: absolute;
    float: center;
    left: 25%;
  }
  .menu {
    display: none;
  }
  .tblmenubox {
    display: block;
    visibility: visible;
  }
  .menu.sh {
    display: block;
    position: absolute;
    top: 50px;
    background: #1e77b0;
    width: 100%;
    left: 0;
  }
  .menu a:hover {
    color: #eff2f7;
    background: #009cff;
  }
  .menu ul li {
    display: block;
    text-align: center;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <title>SA-MR</title>
  <link rel="stylesheet" type="text/css" href="css/SAMRnavbar.css">
  <meta charset="utf-8">
</head>

<body>

  <!-- Navbar -->
  <nav>
    <div class="wrap">
      <div class="title">
        <div class="kotakpersegi">
          <a href="">
            <img class="logo" src="img/logo.png" width="180" height="50">
          </a>
        </div>
      </div>
      <div class="tblmenubox">
        <div class="togel tblmenu">

        </div>
      </div>
      <div class="menu">
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Contact</a></li>
          <li><a href="#">Service</a></li>
          <li><a href="#">Fiture</a></li>
          <li><a href="#">Maps</a></li>
        </ul>
      </div>
    </div>
  </nav>
  <!-- Navbar -->

  <div>
    <p>ONE: The quick brown fox jumped over the lazy dog.</p>
    <p>TWO: Mary's violet eyes made John stay up nights proposing.</p>
    <p>THREE: Roy G Biv</p>
    <p>FOUR: Please Excuse My Dear Aunt Sally</p>
  </div>
</body>

</html>

如果 position: fixed 方法是您想要的方法，您可以在它后面的所有内容周围放置一个包装器，并为其指定一个与 margin-top 高度相同的 <nav /> ( 如果这是一个已知的固定数量）：

$(".togel.tblmenu").click(function() {
  $(".menu").toggleClass("sh");
});
body {
  margin: 0;
  background: #eff2f7;
}

a {
  left: -50;
  text-decoration: none;
  color: white;
  display: block;
  transition: 0.3s;
  font-size: 20px
}

a:hover {
  transition: 0.3s;
}

nav {
  position: fixed;
  top: 0;
  left: 20px;
  right: 0;
  background: #1e77b0;
  font-family: Palatino Linotype;
}

.title {
  display: inline-block;
  float: left;
  line-height: 50px;
}

.menu {
  display: inline-block;
  float: left;
}

.menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu ul li {
  display: inline-block;
}

.menu ul li a {
  padding: 0 50px;
  display: block;
  line-height: 50px;
}

.menu li:hover {
  background-color: #009cff;
}

.wrap {
  width: 95%;
  margin: 0 auto;
}

.tblmenubox {
  display: inline-block;
  float: right;
  line-height: 50px;
}

.tblmenu {
  display: block;
  position: absolute;
  width: 25px;
  height: 25px;
  background: #1e77b0;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
}

.tblmenubox {
  display: none;
  visibility: hidden;
}

.kotakpersegi {
  display: block;
  position: absolute;
  left: -40px;
  width: 250px;
  height: 50px;
  background: #009cff;
  transform: translateY(-50%);
  -webkit-transform: skew(30deg);
  -moz-transform: skew(30deg);
  -o- transform: skew(30deg);
  transform: skew(30deg)
}

.logo {
  position: absolute;
  left: 50px;
}

.content-wrapper { /* added a top margin */
  margin-top: 50px; /* We know this is the height because it is applied specifically in CSS */
}

@media screen and (max-width:1000px) {
  .kotakpersegi {
    width: 150%;
  }
  .logo {
    position: absolute;
    float: center;
    left: 25%;
  }
  .menu {
    display: none;
  }
  .tblmenubox {
    display: block;
    visibility: visible;
  }
  .menu.sh {
    display: block;
    position: absolute;
    top: 50px;
    background: #1e77b0;
    width: 100%;
    left: 0;
  }
  .menu a:hover {
    color: #eff2f7;
    background: #009cff;
  }
  .menu ul li {
    display: block;
    text-align: center;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <title>SA-MR</title>
  <link rel="stylesheet" type="text/css" href="css/SAMRnavbar.css">
  <meta charset="utf-8">
</head>

<body>

  <!-- Navbar -->
  <nav>
    <div class="wrap">
      <div class="title">
        <div class="kotakpersegi">
          <a href="">
            <img class="logo" src="img/logo.png" width="180" height="50">
          </a>
        </div>
      </div>
      <div class="tblmenubox">
        <div class="togel tblmenu">

        </div>
      </div>
      <div class="menu">
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Contact</a></li>
          <li><a href="#">Service</a></li>
          <li><a href="#">Fiture</a></li>
          <li><a href="#">Maps</a></li>
        </ul>
      </div>
    </div>
  </nav>
  <!-- Navbar -->

  <div class="content-wrapper">
    <p>ONE: The quick brown fox jumped over the lazy dog.</p>
    <p>TWO: Mary's violet eyes made John stay up nights proposing.</p>
    <p>THREE: Roy G Biv</p>
    <p>FOUR: Please Excuse My Dear Aunt Sally</p>
    <p>FIVE</p>
    <p>SIX</p>
    <p>SEVEN</p>
    <p>EIGHT</p>
    <p>NINE</p>
    <p>TEN</p>
    <p>ELEVEN</p>
    <p>TWELVE</p>
    <p>FOURTEEN (FOR LUCK)</p>
  </div>
</body>

</html>

如您所见，内容仍然可以很好地滚动到 <nav /> 后面。还有其他方法可以使用 flex 或 grid 来实现这一点，但对于 position: fixed 方法，这将起作用。

相关问题
最新问题