<!DOCTYPE html> <html> <title>Web Page Design</title> <head> <style> h1 { text-align: center; margin-bottom: 50px; } .wrapper { position: relative; display: flex; } .big { width: 200px; height: 300px; background-color: green; position: relative; margin: auto; display: block; } .small { width: 50px; height: 50px; background-color: orange; position: absolute; } .small:first-child { top: 0; left: 0; right: 0; transform: translateY(-50%); margin: auto; } .small:nth-child(2) { bottom: 0; left: 0; right: 0; transform: translateY(50%); margin: auto; } .small:nth-child(3) { top: 50%; left: 0; transform: translate(-50%, -50%); } .small:nth-child(4) { top: 50%; right: 0; transform: translate(50%, -50%); } </style> </head> <body> <h1>Lesson00 (2.1.2)</h1> <div class="wrapper"> <div class="big"> <div class="small"></div> <div class="small"></div> <div class="small"></div> <div class="small"></div> </div> </div> </body> </html>
We use cookies to provide and improve our services. By using our site, you consent to our Cookies Policy. Accept Learn more