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的

，而不是固定的。

Answer 2

如果您有负边距或位置为绝对或固定的元素，只需使用两个div即可设法使它们重叠的唯一方法。只是不要使用它应该解决的两件事。

以下是一个基本示例：http://jsbin.com/zakolaca/1/edit

如何将标题与内容分开

2 个答案: