<!DOCTYPE html> <html> <head> <style> #d1 { width: 250px; height: 200px; margin: 200px; transform: translateY(10px); } #d1.hidden { transform: translateY(20px); } #d2 { background-color: yellow; position: relative; width: 100px; height: 100px; left: 0; } .hidden > #d2 { left: -100px; } </style> </head> <body> <div id="d1" class="hidden"> <div id="d2"></div> </div> </body> </html>