| <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> |
