SOURCE

<!--
    固定定位
        --当把元素的 position 属性设置为 fixed时，就开启了元素的固定定位。
        --是一种特殊的绝对定位，所以固定定位的大部分特点都和绝对定位一样
          唯一不同的之处：
                    固定定位永远参照于浏览器的视口进行定位，注意是永远。
                    所以开启固定定位的元素不会跟随网页的滚动条滚动。
                    此处的视口不同于网页，网页的大小是可以变化的，而视口不会变。
-->
<div class="box1">1</div>
<div class="box5">
    5
    <div class="box4">
        4
        <div class="box2">2</div>
    </div>
</div>
<div class="box3">3</div>

body{
    font-size: 60px;
    height: 2000px;
}
.box1{
    width: 200px;
    height: 200px;
    background-color: red;
}
.box2{
    width: 200px;
    height: 200px;
    background-color:aqua;
    position: fixed;
    left: 0px;
    top: 0px;
}
.box3{
    width: 200px;
    height: 200px;
    background-color:blue;
}
.box4{
    width: 300px;
    height: 300px;
    background-color:coral;
    position: relative;
}
.box5{
    width: 400px;
    height: 400px;
    background-color:lightseagreen;
    position: absolute;
}