E' lo stesso esempio, prima col posizionamento assoluto e poi relativo.

codice:
<html>
<head><title>prova div con position relative</title></head>
<style type="text/css">
#a { position: relative; top: 0px; height: 100px; width: 1000px; left:  0px; overflow: hidden; background-color: #ff0000; }
#b { position: relative; top: 0px; height: 100px; width: 1000px; left:  0px; overflow: hidden; background-color: #00ff00; }
#c { position: relative; top: 0px; height: 300px; width:  500px; left:  0px; overflow: hidden; background-color: #0000ff; }
#d { position: relative; top: -300px; height: 300px; width:  500px; left: 500px; overflow: hidden; background-color: #ffff00; }
#e { position: relative; top: -300px; height: 100px; width: 1000px; left:  0px; overflow: hidden; background-color: #00ffff; }

</style>
<body>
<div id="a">
a
</div>

<div id="b">
b
</div>

<div id="c">
c
</div>

<div id="d">
d
</div>

<div id="e">
e
</div>


</body>
</html>
codice:
<html>
<head><title>prova div con position absolute</title></head>
<style type="text/css">
#a { position: absolute; top: 10px; height: 100px; width: 1000px; left:  10px; overflow: hidden; background-color: #ff0000; }
#b { position: absolute; top: 110px; height: 100px; width: 1000px; left:  10px; overflow: hidden; background-color: #00ff00; }
#c { position: absolute; top: 210px; height: 300px; width:  500px; left:  10px; overflow: hidden; background-color: #0000ff; }
#d { position: absolute; top: 210px; height: 300px; width:  500px; left: 510px; overflow: hidden; background-color: #ffff00; }
#e { position: absolute; top: 510px; height: 100px; width: 1000px; left:  10px; overflow: hidden; background-color: #00ffff; }

</style>
<body>
<div id="a">
a
</div>

<div id="b">
b
</div>

<div id="c">
c
</div>

<div id="d">
d
</div>

<div id="e">
e
</div>


</body>
</html>
La grafica riprodotta è identica, però vorrei sapere perché col posizionamento relativo viene visualizzata la scrollbar laterale con un mezzo spazio sotto che rimane vuoto?
Grazie.