<style>
    div.negativemargintop { position: absolute; top: 20px; font: 14px/0 Ahem; color: green;}
    #float { float:left; background-color: green; margin-top: 17px;  font-size: 1.5em; }
    #visible { height: 20px; width:40px; float:left; background-color: blue; }
</style>
The green box should be below the blue box.<br>
 - .negativemargintop gets 30px clearance thanks to its negative margin-top of -10px.
 - .negativemargintop then collapses its margins to -10px which pulls it up 10px to the bottom edge of the float.
 - #float positions itself 17px below the top-border edge of .negativemargintop
https://bugs.webkit.org/show_bug.cgi?id=14664<br>
<div style="position:relative;">
    <div id="visible"></div>
    <div class="negativemargintop">
        <div id="float">xx</div>
    </div>			
</div>