Question

我创建了一个带有css :)布局的页面。问题是Section区域重叠Header区域:)）...如何解决这个问题？标题区域应位于顶部，之后应显示区域区域

HTML code：

<header style="width: auto; outline: 1px solid red;position: relative; ">
    <div style="width: 150px; outline: 1px solid green;">XXXXX picture XXXXX picture XXXXX picture</div>
    <div style="width: 810px; height: 70px; outline: 1px solid yellow">
      <div style='position: relative; width: auto; height: 100%; outline: 1px solid red;'>
        <div style="position:absolute; top:50%; height:20px; width: 100%; margin-top:-10px; outline:   1px solid green; ">
         <div style="float: left; padding: 0 20;" class="blue">News</div>
         <div style="float: left; padding: 0 20;" class="blue">Tax Tips</div>
         <div style="float: left; padding: 0 20;" class="blue">Lifestyle</div>
         <div style="float: right; padding: 0 20;">XXXXXX</div>
         <div style="float: right; padding: 0 20;">XXXXXX</div>
        </div>
      </div>
    </div>
</header>
<section>
    <div class='post'>
       <div class='post-title>'>TITLE TITLE TITLE TITLE</div>
           <div class='tech-title>'>
              <div class='added-by'>MARK NEWCOBE</div>
              <div class='added-at'>10:10:00 12/12/2014</div>
           </div>
           <div class='post-body'>
              <p>Body Body Body Body Body Body Body Body Body Body Body Body</p>
              <p>Body Body Body Body Body Body Body Body Body Body Body Body</p>
              <p>Body Body Body Body Body Body Body Body Body Body Body Body</p>
              <p>Body Body Body Body Body Body Body Body Body Body Body Body</p>
            </div>
        </div>
</section>

CSS代码：

.blue 
{
  color: blue;
}
.post
{
  width: auto:    
}

.added-by
{
  float: left;
  font-size: 10px;
}

.added-at
{
  float: right;      
  font-size: 10px;
}

.post
{
  //position: static;      
}

Answer 1

首先，我建议您使用ClassSelectors而不是使用内联样式。

然后与您的问题相关的是您使用absolute位置将内容放置在标题部分中，该元素将元素从流中取出，然后不占用任何空间来制作他的容器{{1 }}。尝试使用 height = 0 而不是float来使其内联：

删除绝对位置的内联样式，然后添加它。
```
position:absolute
```

选中 DemoFiddle

一个部分与html页面上的其他部分重叠

1 个答案: