Question

HTML：

    body{background-color:#0BC;}

    .fixed-nav-bar{position: fixed;
      top:0;
      left:0;
      right:0;
      z-index:9999;
      width:100%;
      height:auto;
      text-align: center;
      background-color:#FFF;}

    /*display the text on the same line*/
       #topnav li{display:inline;list-style-type:none;padding:20px}

    /*removes underline format*/
       #topnav a{text-decoration:none;color:#00F;padding:5px;}

    /*set hover effect*/
       #topnav a:hover{background-color:blue;color:#FFF;}

    /*set background of about-box*/
       .silver-background{background-color:silver;}

    /*create a bottom bar*/
       .bottom-bar {width:fluid;
       padding:20px;
       bottom:0;
       left:0;
       right:0;
       position:absolute;
       height:50px;
       text-align:center;
       background-color:#FFF;}

<link href="https://fonts.googleapis.com/css?family=Lobster"   rel="stylesheet" type="text/css">

    <nav class="fixed-nav-bar" id="topnav">
     <ul>
      <p style="font-family:Lobster;font-size:30px;text">Stark</p>
        <li><a href="top">About</li>
        <li><a href="Portfolio">Portfolio</li>
        <li><a href="Contact">Contact</li>
     </ul>
    </nav>

    <div class="silver-background">
     <p>This is a column for personal background</p>
    </div>  
  
    <div class="bottom-bar">
     <p>stark copyright 2016. All Rights Reserved.</p>
    </div>

我打算创建一个包含div元素的网页。使用上面的代码，我设法创建顶部和底部栏。然而，“银色背景”并未出现。这里需要一些指导。

更新：此处有许多用户提出position:fixed上的问题。虽然我很欣赏这些评论并理解导致身体没有出现的问题，但我想指出固定位置的意图是因为我希望顶部菜单栏在滚动时始终出现在屏幕上。如果有人愿意在解决身体问题时提供任何关于如何保留它的建议，我将不胜感激。

Answer 1

试试这个..

body{
  background-color:#0BC;
}

.fixed-nav-bar{
  top:0;
  left:0;
  right:0;
  z-index:999;
  width:100%;
 
  text-align: center;
  background-color:#FFF;
  position: fixed;
}

/*display the text on the same line*/
#topnav li{
  display:inline;
  list-style-type:none;
  padding:10px;
}

/*removes underline format*/
#topnav a{
  text-decoration:none;
  color:#54d;
  padding:5px;
}

/*set hover effect*/
#topnav a:hover{
  background-color:blue;
  color:#FFF;
}

/*set background of about-box*/
.silver-background{
  margin-top: 100px;
  padding:20px;
  background-color:silver;
  min-height:500px;
  text-align:center;
}

/*create a bottom bar*/
.bottom-bar {
  width:fluid;
  padding:20px;
  bottom:0;
  left:0;
  right:0;
  position:relative;
  height:50px;
  text-align:center;
  background-color:#FFF;}

<link href="https://fonts.googleapis.com/css?family=Lobster"   rel="stylesheet" type="text/css">
<div>
<nav class="fixed-nav-bar" id="topnav">
     <ul>
      <p style="font-family:Lobster;font-size:30px;text">Stark</p>
        <li><a href="top">About </a></li>
        <li><a href="Portfolio">Portfolio </a></li>
        <li><a href="Contact">Contact </a></li>
     </ul>
    </nav>
</div>
    

    <div class="silver-background">
     <p>This is a column for personal background</p>
    </div>  
  
    <div class="bottom-bar">
     <p>stark copyright 2016. All Rights Reserved.</p>
    </div

Answer 2

您的<nav>元素具有position: fixed;和高z-index。它被手动放置在与银<div>相同的位置并在其上方凸起。

有几种方法可以阻止这种情况：你可以关闭<nav>中的背景颜色，这样它背后的元素就会显示出来。

您可以降低z-index，但请注意z-index已经自然太高，因此您无法将其关闭，您必须将其设置为低; -1有效。

您可以删除fixed定位，但这也会使布局混乱。

Answer 3

尝试从position: absolute; css类

中删除.fixed-nav-bar

<强> HTML

<nav class="fixed-nav-bar" id="topnav">
  <ul>
    <p style="font-family:Lobster;font-size:30px;text">Stark</p>
    <li><a href="#">About</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

<div id="silver-background">
  This is a column for personal background
</div>

<div class="bottom-bar">
  <p>stark copyright 2016. All Rights Reserved.</p>
</div>

<强> CSS

body {
   background-color: #0BC;
 } 

 .fixed-nav-bar {
   //position: absolute;
   top: 0;
   left: 0;
   right: 0;
   z-index: 9999;
   width: 100%;
   height: auto;
   text-align: center;
   background-color: #FFF;
 }
 /*display the text on the same line*/

 #topnav li {
   display: inline;
   list-style-type: none;
   padding: 20px
 }
 /*removes underline format*/

 #topnav a {
   text-decoration: none;
   color: #00F;
   padding: 5px;
 }
 /*set hover effect*/

 #topnav a:hover {
   background-color: blue;
   color: #FFF;
 }
 /*set background of about-box*/

 #silver-background {
   background-color: silver;
 }
 /*create a bottom bar*/

 .bottom-bar {
   width: fluid;
   padding: 20px;
   bottom: 0;
   left: 0;
   right: 0;
   position: absolute;
   height: 50px;
   text-align: center;
   background-color: #FFF;
   color: blue
 }

Answer 4

好的家伙我意识到灰色框没有出现，因为我没有定义边距，导致它被标题覆盖。问题解决了。谢谢大家帮忙！

我的银色身体没有出现

4 个答案: