html - HTMLの質問がわからない

Question

スパンと他の 2 つの div を配置した div があります。div の 1 つがスパンの直後に表示されます。だから私はコンテナのdivに position: absolute を与えました。次の div は top: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;
}