我的银色身体没有出现

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索引。它被手动定位在与银<div>相同的位置，并在上面凸起。

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

您可以降低z-索引，但是请注意，z-索引已经很自然地太高了，所以您不能仅仅关闭它，您必须将其设置为低；-1工作。

您可以删除fixed定位，尽管这也会扰乱布局。

Answer 3

尝试从position: absolute; css类中删除.fixed-nav-bar

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