there is such

In general, you need to implement this, while the blocks must be adaptive.
Already 2 hours I suffer with the imposition of one block on another, but something does not work.

.pup { position: relative; margin: 0 auto; padding: 20px; overflow: auto; z-index:0; } 
 <div class="pup"> <img src="fon.jpg" "> <div style="display:inline-block;position:absolute;top:30px; width:300px;"> здесь будет текст</div> <div style="left:400px;z-index:100;position:absolute;top:30px;display:inline-block; "> <img src="forma_svyazi.png" > </div> </div>

Here's what I get, I added a scroll:

enter image description here

    1 answer 1

     body { padding-top: 100px; } .main { width: 100%; height: 300px; background-color: red; position: relative; } .form { width: 20%; height: 300px; background-color: green; position: absolute; right: 5%; top: -20%; } 
     <body> <div class="main"> <div class="form"></div> </div> </body> 

     <div class="main"> <div class="form"></div> </div> body { padding-top: 100px; } .main { width: 100%; height: 300px; background-color: red; position: relative; } .form { width: 20%; height: 300px; background-color: green; position: absolute; right: 5%; top: -20%; }