css - 如何将标题与内容分开

Question

我的标题覆盖了它下面内容的顶部。

例如:

_________________
| header |
| ______________ |
||______________||
| content |
|______________|

我怎样才能使标题的 div 与内容的 div 分开。

最终目标:

 _________________
| header         |
|                |
|________________|
 _______________
|              |
|    content   |
|______________|

Html(放在标题的div中。内容只是一些图片和<p>标签。):

  <div class='nav'>
    <ul class='Menu'>
      <li><a href='#'><span>Home</span></a></li>
      <li><a href='#'><span>Blog</span></a></li>
      <li><a href='#'><span>Contact</span></a></li>
    </ul>     
    <h3 class='Name'>name</h3>
  </div>

CSS:

.nav {
  background-color: #000000;
  font-style: italic;
  position: fixed;
  top: 0px;
  right: 0px;
  left: 0px;
}

.Menu
{
  float: right;
  text-decoration: none;
  width: 40%;
/*  padding-top: 5px; */
}
.Menu li{
  display: inline;
  padding-left: 50px;
  font-size: 20%;
}

.Menu li a{
  color: #CCCCCC;
  font-size: 15px;
  text-decoration: none;
}

.Name {
  display: inline-block
}

.Menu li a:hover {
  color: #FFFFFF;
}

.nav h3 {
  padding-left: 250px;
  Color: #7A7A99;
}

.intro {
  background: url('http://www.amritray.com/wp-content/uploads/2012/01/foggy-photographs21.jpg') no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  -ms-ie-background-size: cover;
  background-size: cover;
  top: 0px;
  right: 0px;
  left: 0px;
  height: auto;
  overflow: auto;
  text-align: center;
}

Answer 1

你应该使用

{position:relative} 

对于标题和内容 div，而不是固定的。