I make Landing and one block stubbornly climbs onto the previous one, instead of following it.
.fifth-part { width: 100%; height: 50.833em; display: block; position: absolute; overflow: hidden; background: rgba(255, 255, 255, 0.7); } .backgr { height: 100%; width: 100%; } .big-img { width: 25.750em; height: 35.500em; display: block; padding-left: 30em; padding-top: 2.7em; z-index: 3; } .small-img { width: 20.667em; height: 35.833em; display: block; padding-left: 45em; padding-top: 9em; position: absolute; z-index: 5; } /*слайдер*/ .sixth-part { width: 100%; height: 24.167em; // background: #f8f8f8; position: absolute; overflow: hidden; background: pink; } .quote-img_s { width: 5.000em; height: 5.417em; } <div class="fifth-part"> <div class="fifth-part_s"> <img class="backgr" src="images/45.jpg" alt="#"> <span class="one">We work with</span> <span class="two">AMAZING SERVICES</span> <span class="no-text_no">_____</span> <img class="big-img" src="images/p.png" alt="#"> <img class="small-img" src="images/White.png" alt="#"> </div> </div> <!--слайдер --> <div class="sixth-part"> <div class="sixth-part_s"> <div class="quote-img"> <img class="quote-img_s" src="images/SPEECH.png" alt="#"> </div> <div class="quote-text"> <span class="quote-text_quote">"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi placeat, laborum ratione laboriosam reprehenderit modi magni. Quaerat doloribus a aliquam necessitatibus explicabo, esse aliquid laudantium porro. Voluptatum alias nihil iusto."</span> <span class="quote-text_autor">John Doe</span> </div> </div> </div>"> "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi placeat, laborum ratione laboriosam reprehenderit modi magni. Quaerat doloribus a aliquam necessitatibus explicabo, esse aliquid laudantium porro. Voluptatum alias nihil iusto." <<div class="fifth-part"> <div class="fifth-part_s"> <img class="backgr" src="images/45.jpg" alt="#"> <span class="one">We work with</span> <span class="two">AMAZING SERVICES</span> <span class="no-text_no">_____</span> <img class="big-img" src="images/p.png" alt="#"> <img class="small-img" src="images/White.png" alt="#"> </div> </div> <!--слайдер --> <div class="sixth-part"> <div class="sixth-part_s"> <div class="quote-img"> <img class="quote-img_s" src="images/SPEECH.png" alt="#"> </div> <div class="quote-text"> <span class="quote-text_quote">"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi placeat, laborum ratione laboriosam reprehenderit modi magni. Quaerat doloribus a aliquam necessitatibus explicabo, esse aliquid laudantium porro. Voluptatum alias nihil iusto."</span> <span class="quote-text_autor">John Doe</span> </div> </div> </div>
For clarity, the block, which should be at the bottom, made with a pink background
position: absolute;- Alex