| 123456789101112131415161718192021222324252627282930313233343536373839404142434445 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <link rel="match" href="reference/overflow-hidden-2-ref.html" />
- <style>
- .box1 {
- width: 400px;
- height: 400px;
- background-color: slateblue;
- position: absolute;
- overflow: hidden;
- }
- .translate {
- width: 200px;
- height: 200px;
- background-color: black;
- transform: translate(150px, 150px);
- }
- .box2 {
- width: 100px;
- height: 100px;
- background-color: orangered;
- position: absolute;
- }
- .box3 {
- position: relative;
- width: 100px;
- height: 100px;
- background-color: greenyellow;
- top: -90px;
- left: -120px;
- }
- </style>
- </head>
- <body>
- <div class="box1">
- <div class="translate">
- <div class="box2"><div class="box3"></div></div>
- </div>
- </div>
- </body>
- </html>
|
