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