<!DOCTYPE html>
<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title></head><style> *{ margin: 0; padding: 0; } .box div{ width: 200px; height: 200px; background-color: aquamarine; margin-right: 30px; display: inline-block; text-align: center; font-size: 30px; line-height: 200px; } .two{ position: relative; left: 20px; top: 20px; } .box .three{ position: absolute; left: 100px; background-color:rgb(194, 173, 176); z-index: 77; opacity: .6; } .box2{ height: 600px; position: relative; } .a{ position: sticky; height: 100px; width: 100px; top: 100px; background-color: rgb(182, 189, 186); margin-bottom: 100px; } .b{ position: sticky; height: 100px; width: 100px; top: 50px; opacity: .8; background-color: rgb(118, 219, 175); } .box3{ height: 1200px; background-color: aquamarine; }</style><body> <div class="box"> <div class="one">one</div> <div class="two">two</div> <div class="three">three</div> <div class="four">four</div> </div> <div class="box2"> <div class="a">absol</div> <div class="b"></div> </div> <div class="box3"></div></body></html>