| <!DOCTYPE html> |
| <style> |
| #grandparent { |
| width: 200px; height: 200px; overflow: hidden; border-radius: 25px; |
| background-color: yellow; |
| } |
| #parent { position: relative; left: 30px; top: 30px; width: 200px; |
| height: 200px; overflow: hidden; background-color: blue; |
| } |
| #child { position: relative; left: 10px; top: 10px; width: 120px; |
| height: 120px; background-color: gray; will-change: transform; |
| } |
| #grandchild { position: relative; left: 10px; top: 10px; width: 200px; |
| height: 200px; background-color: green; |
| } |
| </style> |
| <div id='grandparent'> |
| <div id='parent'> |
| <div id='child'> |
| <div id='grandchild'></div> |
| </div> |
| </div> |
| </div> |
