<!DOCTYPE html> <html> <head> <style> #rel { position: relative; margin: 0; padding: 0; } .abs { position: absolute; margin: 0; padding: 0; top: 25px; left: 25px; width: 50px; height: 50px; background-color: green; } #bad { background-color: blue; } </style> </head> <body> The green square should not completely cover the blue square. <div class="abs" id="bad"></div> <div style="position: relative"> <table> <tfoot id="rel"> <tr> <td> <div class="abs"></div> </td> </tr> </tfoot> </table> </div> </body> </html>