html - 如何在不使用填充的情况下防止内容与固定导航栏重叠

Question

我在网站上创建了一个固定的导航栏，但是当我向下滚动时，内容会滚动到导航栏的顶部。我知道这可以通过填充来解决，但是我设计网站的方式，填充将使导航栏周围的空间变为空白。如何使内容滚动到导航栏下方，以便您可以在导航栏的边缘看到它，但它不会出现在导航栏的顶部？

当我添加position:fixed;时，导航栏似乎也存在问题。到CSS。菜单选项没有为我打开，但在这篇文章的演示中，您可以看到选项打开，但部分隐藏。请问有人知道这是什么原因吗？提前致谢。

/*!
 * Start Bootstrap - Full Slider (http://startbootstrap.com/template-overviews/full-slider)
 * Copyright 2013-2017 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-full-slider/blob/master/LICENSE)
 */

#logo{
    margin-left: 3px;
    float: left;
}

body {
    background:url('https://facsen.wsu.edu/WSUPullman080902990.jpg') ;
    background-size: 100% auto;
    background-repeat: no-repeat;
}    

#transparent{
    opacity: 0;
}

html{
    background-repeat: no-repeat; 
}

p { 
    position: relative;
    text-align: justify;
    left: 15%; 
    width: 70%; 
}

p span {  
    display: inline-block;
    margin-top: 5%; 
    color: black; 
    font: bold 100%/45px Helvetica, Sans-Serif;  
}

.container {
    position: relative;
    text-align: center;
    width: 100%;
    left: 0;
    color: white;
}

.bottom-left {
    position: absolute;
    bottom: 8px;
    left: 16px;
    color: white; 
    font: bold 2.5vw/45px Helvetica, Sans-Serif; 
    text-shadow: 2px 2px 2px #36454f;
    left: 40px;
    bottom: 50px;
}

.bottom-left-author {
    position: absolute;
    bottom: 8px;
    left: 16px;
    color: white; 
    font: bold 2vw/45px Helvetica, Sans-Serif; 
    text-shadow: 2px 2px 2px #36454f;
    left: 40px;
}

.bottom-right {
    position: absolute;
    bottom: 8px;
    right: 16px;
    color: white; 
    font: bold 1vw/45px Helvetica, Sans-Serif; 
    text-shadow: 2px 2px 2px #36454f;
    right: 40px;
}


@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
    
  display: inline-block;
  vertical-align: middle;
  
  
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
#cssmenu #menu-button {
  display: none;
}
#cssmenu {
  font-family: Montserrat, sans-serif;
  background: #36454f;
  border-radius: 12px;
  width: 99%;
  padding: 12px;
  margin: 0.5%;
  overflow: hidden;
  position: fixed;
  
}
#cssmenu > ul > li {
  float: left;
}
#cssmenu.align-center > ul {
  font-size: 0;
  text-align: center;
}
#cssmenu.align-center > ul > li {
  display: inline-block;
  float: none;
}
#cssmenu.align-center ul ul {
  text-align: left;
}
#cssmenu.align-right > ul > li {
  float: right;
}
#cssmenu > ul > li > a {
  padding: 17px;
  font-size: 12px;
  letter-spacing: 1px;
  text-decoration: none;
  color: #dddddd;
  font-weight: 700;
  text-transform: uppercase;
}
#cssmenu > ul > li:hover > a {
  color: #ffffff;
}
#cssmenu > ul > li.has-sub > a {
  padding-right: 30px;
}
#cssmenu > ul > li.has-sub > a:after {
  position: absolute;
  top: 22px;
  right: 11px;
  width: 8px;
  height: 2px;
  display: block;
  background: #dddddd;
  content: '';
}
#cssmenu > ul > li.has-sub > a:before {
  position: absolute;
  top: 19px;
  right: 14px;
  display: block;
  width: 2px;
  height: 8px;
  background: #dddddd;
  content: '';
  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -ms-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease;
}
#cssmenu > ul > li.has-sub:hover > a:before {
  top: 23px;
  height: 0;
}
#cssmenu ul ul {
  position: absolute;
  left: -9999px;
}
#cssmenu.align-right ul ul {
  text-align: right;
}
#cssmenu ul ul li {
  height: 0;
  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -ms-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease;
}
#cssmenu li:hover > ul {
  left: auto;
}
#cssmenu.align-right li:hover > ul {
  left: auto;
  right: 0;
}
#cssmenu li:hover > ul > li {
  height: 35px;
}
#cssmenu ul ul ul {
  margin-left: 100%;
  top: 0h
}
#cssmenu.align-right ul ul ul {
  margin-left: 0;
  margin-right: 100%;
}
#cssmenu ul ul li a {
  border-bottom: 1px solid rgba(150, 150, 150, 0.15);
  padding: 11px 15px;
  width: 170px;
  font-size: 12px;
  text-decoration: none;
  color: #dddddd;
  font-weight: 400;
  background: #333333;
}
#cssmenu ul ul li:last-child > a,
#cssmenu ul ul li.last-item > a {
  border-bottom: 0;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li a:hover {
  color: #ffffff;
}
#cssmenu ul ul li.has-sub > a:after {
  position: absolute;
  top: 16px;
  right: 11px;
  width: 8px;
  height: 2px;
  display: block;
  background: #dddddd;
  content: '';
}
#cssmenu.align-right ul ul li.has-sub > a:after {
  right: auto;
  left: 11px;
}
#cssmenu ul ul li.has-sub > a:before {
  position: absolute;
  top: 13px;
  right: 14px;
  display: block;
  width: 2px;
  height: 8px;
  background: #dddddd;
  content: '';
  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -ms-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease;
}
#cssmenu.align-right ul ul li.has-sub > a:before {
  right: auto;
  left: 14px;
}
#cssmenu ul ul > li.has-sub:hover > a:before {
  top: 17px;
  height: 0;
}
@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
  #cssmenu {
    width: 100%;
  }
  #cssmenu ul {
    width: 100%;
    display: none;
  }
  #cssmenu.align-center > ul {
    text-align: left;
  }
  #cssmenu ul li {
    width: 100%;
    border-top: 1px solid rgba(120, 120, 120, 0.2);
  }
  #cssmenu ul ul li,
  #cssmenu li:hover > ul > li {
    height: auto;
  }
  #cssmenu ul li a,
  #cssmenu ul ul li a {
    width: 100%;
    border-bottom: 0;
  }
  #cssmenu > ul > li {
    float: none;
  }
  #cssmenu ul ul li a {
    padding-left: 25px;
  }
  #cssmenu ul ul ul li a {
    padding-left: 35px;
  }
  #cssmenu ul ul li a {
    color: #dddddd;
    background: none;
  }
  #cssmenu ul ul li:hover > a,
  #cssmenu ul ul li.active > a {
    color: #ffffff;
  }
  #cssmenu ul ul,
  #cssmenu ul ul ul,
  #cssmenu.align-right ul ul {
    position: relative;
    left: 0;
    width: 100%;
    margin: 0;
    text-align: left;
  }
  #cssmenu > ul > li.has-sub > a:after,
  #cssmenu > ul > li.has-sub > a:before,
  #cssmenu ul ul > li.has-sub > a:after,
  #cssmenu ul ul > li.has-sub > a:before {
    display: none;
  }
  #cssmenu #menu-button {
    display: block;
    padding: 17px;
    color: #dddddd;
    cursor: pointer;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 700;
  }
  #cssmenu #menu-button:after {
    position: absolute;
    top: 22px;
    right: 17px;
    display: block;
    height: 4px;
    width: 20px;
    border-top: 2px solid #dddddd;
    border-bottom: 2px solid #dddddd;
    content: '';
  }
  #cssmenu #menu-button:before {
    position: absolute;
    top: 16px;
    right: 17px;
    display: block;
    height: 2px;
    width: 20px;
    background: #dddddd;
    content: '';
  }
  #cssmenu #menu-button.menu-opened:after {
    top: 23px;
    border: 0;
    height: 2px;
    width: 15px;
    background: #ffffff;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  #cssmenu #menu-button.menu-opened:before {
    top: 23px;
    background: #ffffff;
    width: 15px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  #cssmenu .submenu-button {
    position: absolute;
    z-index: 99;
    right: 0;
    top: 0;
    display: block;
    border-left: 1px solid rgba(120, 120, 120, 0.2);
    height: 46px;
    width: 46px;
    cursor: pointer;
  }
  #cssmenu .submenu-button.submenu-opened {
    background: #262626;
  }
  #cssmenu ul ul .submenu-button {
    height: 34px;
    width: 34px;
  }
  #cssmenu .submenu-button:after {
    position: absolute;
    top: 22px;
    right: 19px;
    width: 8px;
    height: 2px;
    display: block;
    background: #dddddd;
    content: '';
  }
  #cssmenu ul ul .submenu-button:after {
    top: 15px;
    right: 13px;
  }
  #cssmenu .submenu-button.submenu-opened:after {
    background: #ffffff;
  }
  #cssmenu .submenu-button:before {
    position: absolute;
    top: 19px;
    right: 22px;
    display: block;
    width: 2px;
    height: 8px;
    background: #dddddd;
    content: '';
  }
  #cssmenu ul ul .submenu-button:before {
    top: 12px;
    right: 16px;
  }
  #cssmenu .submenu-button.submenu-opened:before {
    display: none;
  }
}

<!DOCTYPE html>
<html lang="en">

  <head>
      
    <!-- jQuery -->
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <!-- MenuMaker Plugin -->
    <script src="https://s3.amazonaws.com/menumaker/menumaker.min.js"></script>
    <!-- Icon Library -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <title>WSU Visitor's Magazine</title>
    <!-- Bootstrap core CSS -->
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="css/full-slider.css" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
   
  </head>

  <body>
      <div id='cssmenu'>
          <ul>
              <img  class="img-circle" id="logo" src="images/logo.png" width="55" height="55">
              <li class='active'><a>Features</a>
          <ul>
              <li><a href='#article1'>Article 1</a></li>
              <li><a href='#article2'>Article 2</a></li>
          </ul>
              </li>
              <li class='active'><a href='#'>Spring</a>
                  <ul>
                      <li><a href='#article3'>Article 1</a></li>
                      <li><a href='#article4'>Article 2</a></li>
                  </ul>
              </li>
              <li class='active'><a href='#'>Summer</a>
                  <ul>
                      <li><a href='#'>Article 1</a></li>
                      <li><a href='#'>Article 2</a></li>
                  </ul>
              </li>
              <li class='active'><a href='#'>Fall</a>
                  <ul>
                      <li><a href='#'>Article 1</a></li>
                      <li><a href='#'>Article 2</a></li>
                  </ul>
              </li>
              <li class='active'><a href='#'>Winter</a>
                  <ul>
                      <li><a href='#'>Article 1</a></li>
                      <li><a href='#'>Article 2</a></li>
                  </ul>
              </li>
          </ul>
      </div>
      
      <script>
          (function($) {

  $.fn.menumaker = function(options) {
      
      var cssmenu = $(this), settings = $.extend({
        title: "WSU Visitor's Magazine",
        format: "dropdown",
        sticky: false
      }, options);

      return this.each(function() {
        cssmenu.prepend('<div id="menu-button">' + settings.title + '</div>');
        $(this).find("#menu-button").on('click', function(){
          $(this).toggleClass('menu-opened');
          var mainmenu = $(this).next('ul');
          if (mainmenu.hasClass('open')) { 
            mainmenu.hide().removeClass('open');
          }
          else {
            mainmenu.show().addClass('open');
            if (settings.format === "dropdown") {
              mainmenu.find('ul').show();
            }
          }
        });

        cssmenu.find('li ul').parent().addClass('has-sub');

        multiTg = function() {
          cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>');
          cssmenu.find('.submenu-button').on('click', function() {
            $(this).toggleClass('submenu-opened');
            if ($(this).siblings('ul').hasClass('open')) {
              $(this).siblings('ul').removeClass('open').hide();
            }
            else {
              $(this).siblings('ul').addClass('open').show();
            }
          });
        };

        if (settings.format === 'multitoggle') multiTg();
        else cssmenu.addClass('dropdown');

        if (settings.sticky === true) cssmenu.css('position', 'fixed');

        resizeFix = function() {
          if ($( window ).width() > 768) {
            cssmenu.find('ul').show();
          }

          if ($(window).width() <= 768) {
            cssmenu.find('ul').hide().removeClass('open');
          }
        };
        resizeFix();
        return $(window).on('resize', resizeFix);

      });
  };
})(jQuery);

(function($){
$(document).ready(function(){

$("#cssmenu").menumaker({
   title: "WSU Visitor's Magazine",
   format: "multitoggle"
});

});
})(jQuery);
</script>
     
      
      
      
      
      
      
      
      
      
      <section id="features">
          <div>
              <img class="img-responsive" id="transparent" src="images/football.jpg" width= fill>
          </div>
      </section>
      
      <section id="features">
          <div id="article1">
              <div class="container">
                  <img class="img-responsive" id="articlephoto" src="images/football.jpg"  align="right" width= contain alt=""/>
                  <div class="bottom-left">Golden Bears spoil Cougars’ undefeated season</div>
                  <div class="bottom-left-author"><span class="glyphicon glyphicon-user"></span> Jackson Gardner</div>
                  <div class="bottom-right">Photo Credit</div>
              </div>

              <article>
                  <p><span>No. 15 WSU (6-1, 3-1) lost for the first time this year, as the team fell to University of California, Berkeley (4-3, 1-3) by a final score of 37-3 Friday night.<br>
From the opening kickoff, a combination of penalties and a lack of offensive rhythm ailed the Cougars. Despite a reasonable effort from the defense in the first half, seven turnovers proved to be enough to break the Cougars’ will.<br>
Immediately after the game, Head Coach Mike Leach took the podium and voiced his displeasure in his team’s performance.
“We didn’t play good in any aspect of the game. Cal outcoached us, Cal outplayed us in every position that I saw,” he said. “Our guys just sauntered around on the field, like weirdly, like we have accomplished something.”
Redshirt freshman wide receiver Renard Bell returned the opening kickoff 99 yards to the house, only to be called back by a holding penalty. In total, the Cougars missed out on 14 points in the first half from their penalties.
Then, the ensuing drive was cut short when California redshirt freshman cornerback Camryn Bynum jumped an out route, and picked off redshirt senior quarterback Luke Falk’s pass. The freshman finished the first half with two interceptions.
In Falk’s 262 passing attempts leading up to Friday night, he had only thrown two interceptions. But, in his 43 attempts against the Golden Bears, he threw five interceptions.
“When your [quarterback] turns it over six times, you’re not gonna have a real opportunity to win the game,” Falk said. “We didn’t help the defense tonight at all, we had seven turnovers — that’s unacceptable — and it starts with the quarterback.”
The Golden Bears defense feasted on Falk in the pocket, sacking him nine times — the most in a single game this season. Leach did not miss this opportunity to be critical of his offensive line.
“I think they think they’re too good, and they’re not very tough,” he said.
California redshirt sophomore quarterback Ross Bowers started the game only completing one of his first seven passes. From there, he led his offense to make the plays necessary to pull off an upset victory.
While Bowers threw for 258 yards and just one touchdown, he did display a 7-yard touchdown scramble, where he dove into the end zone and partially landed the acrobatic spin.
Surprisingly, this was not the first time Bowers has pulled a stunt like that. In the WIAA State Finals, Bowers dove into the end zone and was flipped around, similar to Friday night’s game.
“You never think you’re gonna do that twice in a lifetime,” Bowers said. “I was just fired up we could end that drive the way we did with a touchdown. All the extra stuff is great, but I’m just happy we executed in crunch time.”
The seven turnovers by the Cougars kept the defense on the field often. California senior running back Vic Enwere took advantage of the physically taxed defense. The 102 rushing yards by Enwere supplemented Bowers’ production, leading to 365 total yards of offense.
Uncharacteristically, the Cougars went home without a touchdown. A 52-yard field goal from senior kicker Erik Powell were the only points for WSU.
“You’re searching for a bright spot, but there was no bright spot. We were pathetic,” Leach said. “We were a bunch of pathetic front-runners.”
The Cougars return home for a 7:45 p.m. kickoff Saturday against University of Colorado, Boulder (4-3, 3-2). ESPN will be broadcasting the Pac-12 matchup.</span></p>
              </article>
          </div>
      </section>
      
      
      <section id="features">
          <div id="article2">
              <div class="container">
                  <img class="img-responsive" id="articlephoto" src="images/football.jpg"  align="right" width= contain alt=""/>
                  <div class="bottom-left">Golden Bears spoil Cougars’ undefeated season</div>
                  <div class="bottom-left-author"><span class="glyphicon glyphicon-user"></span> Jackson Gardner</div>
                  <div class="bottom-right">Photo Credit</div>
              </div>

              <article>
                  <p><span>No. 15 WSU (6-1, 3-1) lost for the first time this year, as the team fell to University of California, Berkeley (4-3, 1-3) by a final score of 37-3 Friday night.<br>
From the opening kickoff, a combination of penalties and a lack of offensive rhythm ailed the Cougars. Despite a reasonable effort from the defense in the first half, seven turnovers proved to be enough to break the Cougars’ will.<br>
Immediately after the game, Head Coach Mike Leach took the podium and voiced his displeasure in his team’s performance.
“We didn’t play good in any aspect of the game. Cal outcoached us, Cal outplayed us in every position that I saw,” he said. “Our guys just sauntered around on the field, like weirdly, like we have accomplished something.”
Redshirt freshman wide receiver Renard Bell returned the opening kickoff 99 yards to the house, only to be called back by a holding penalty. In total, the Cougars missed out on 14 points in the first half from their penalties.
Then, the ensuing drive was cut short when California redshirt freshman cornerback Camryn Bynum jumped an out route, and picked off redshirt senior quarterback Luke Falk’s pass. The freshman finished the first half with two interceptions.
In Falk’s 262 passing attempts leading up to Friday night, he had only thrown two interceptions. But, in his 43 attempts against the Golden Bears, he threw five interceptions.
“When your [quarterback] turns it over six times, you’re not gonna have a real opportunity to win the game,” Falk said. “We didn’t help the defense tonight at all, we had seven turnovers — that’s unacceptable — and it starts with the quarterback.”
The Golden Bears defense feasted on Falk in the pocket, sacking him nine times — the most in a single game this season. Leach did not miss this opportunity to be critical of his offensive line.
“I think they think they’re too good, and they’re not very tough,” he said.
California redshirt sophomore quarterback Ross Bowers started the game only completing one of his first seven passes. From there, he led his offense to make the plays necessary to pull off an upset victory.
While Bowers threw for 258 yards and just one touchdown, he did display a 7-yard touchdown scramble, where he dove into the end zone and partially landed the acrobatic spin.
Surprisingly, this was not the first time Bowers has pulled a stunt like that. In the WIAA State Finals, Bowers dove into the end zone and was flipped around, similar to Friday night’s game.
“You never think you’re gonna do that twice in a lifetime,” Bowers said. “I was just fired up we could end that drive the way we did with a touchdown. All the extra stuff is great, but I’m just happy we executed in crunch time.”
The seven turnovers by the Cougars kept the defense on the field often. California senior running back Vic Enwere took advantage of the physically taxed defense. The 102 rushing yards by Enwere supplemented Bowers’ production, leading to 365 total yards of offense.
Uncharacteristically, the Cougars went home without a touchdown. A 52-yard field goal from senior kicker Erik Powell were the only points for WSU.
“You’re searching for a bright spot, but there was no bright spot. We were pathetic,” Leach said. “We were a bunch of pathetic front-runners.”
The Cougars return home for a 7:45 p.m. kickoff Saturday against University of Colorado, Boulder (4-3, 3-2). ESPN will be broadcasting the Pac-12 matchup.</span></p>
              </article>
          </div>
      </section>
      
      
      <!-- Bootstrap core JavaScript -->
    <script src="vendor/jquery/jquery.min.js"></script>
    <script src="vendor/popper/popper.min.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.min.js"></script>

  </body>
</html>

Answer 1

尝试添加高 z-index对您的导航栏的值(value)。这样它应该始终位于其他元素之上。