html - HTML问题不确定

Question

我有一个 div，我在其上放置了一个 span 和另外两个 div。其中一个 div 应该出现在 span 之后。所以我给了容器div的位置：绝对。下一个 div 应该放在顶部：80%。但由于跨度占用了一些，实际顶部最终达到 80%+跨度高度。你能告诉我一种正确定位它的方法，避免跨度高度吗？

html

<div class="section" id="about">
  <div id="heading">
    <span>ABOUT</span>
  </div>
  <div id="about_definition">
    <p>about definition goes here</p>
  </div>
  <div id="about_services">
    <p>about services goes here</p>
  </div>
</div>

css

#about_definition {
   position: absolute;
   width: 100%;
   height: 20%;
   background-color: white;
}
#about_services {
   position:relative;
   width: 100%;
   height:20%;
   top: 80%;
   background-color: red;
}
.section {
   height: 100%;
}

JSFiddle

Answer 1

尝试绝对定位 .section 和 #about_definition：

http://jsfiddle.net/isherwood/XzrqB/3

#about_definition {
    position: absolute;
    width: 100%;
    height: 20%;
    background-color: white;
}
#about_services {
    position:relative;
    width: 100%;
    height:20%;
    top: 80%;
    background-color: red;
}
.section {
    width: 90%;
    height: 100%;
    background-color: #eee;
    overflow: hidden;
    position: absolute;
}