HTML <span> questionn not sure - html

Question

I have a div on which I placed a span and two other divs. one of the divs should appear just after span. so i gave position: absolute for the container div. the next div was supposed to place at top:80%. but since span takes up some with, the actual top ends up at 80%+span height. could u tell me a way to position it correctly, avoiding the spans height?
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

Try positioning .section and #about_definition absolutely:
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;
}