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