Eu estive procurando muito por este problema e finalmente encontrei a solução em algum fórum obscuro na página 10 do google. A solução está na resposta

O problema ocorre é o seguinte: Após o posicionamento relativo de um elemento com CSS eu recebo um espaço em branco de onde o elemento estava ... Eu não quero o espaço em branco!

    .thetext 
    {
        width:400px;
        background:yellow;
        border: 1px dashed red;
        margin:50px;
        padding:5px;
        font-weight:bold;
    }
    .whiteblob
    {
        position:relative;
        top:-140px;
        left:70px;
        width:200px;
        height:50px;
        border: 4px solid green;
        background:white;
        font-size:2.5em;
        color:red;
        
    }
    .footerallowedwhitespaceinblue
    {
        height:10px;
        background-color:blue;
    }
    .footer
    {
        background-color:grey;
        height:200px;
    }

<div class="thetext"><script type="text/javascript">for(c=0;c<50;c++){document.write("Lorem ipsum dolor est, ");}</script>
    </div>
    <div class="whiteblob">
        &nbsp;buy this!
    </div>
    <div class="footerallowedwhitespaceinblue">
    </div>
    <div class="footer">
        The whitespace above is way to big! The buy this still takes up space whilst it is moved.
    </div>

JSFiddle:http://jsfiddle.net/qqXQn/

Como você pode ver no exemplo, o único espaço em branco que desejo é o espaço em branco causado pelo bloco de texto pela margem de 50 px; e o espaçamento pelo espaço de brancos do pé de dentro é azul (então é visível). O problema é que ... o espaço em branco é muito grande agora porque o div "comprar isto" ainda ocupa espaço depois de ter sido posicionado relativamente.

Como eu resolvo isso?