Как сохранить позицию блока при горизонтальной прокрутке?

Question

[Богдан Кучерук]

Есть таких 2 блока:

#div1{
    height:350px;
    margin-top: 123px;
    position:relative;
    background:#009;
    width:300px;
    overflow-x: scroll;
}
#div2{
    height:400px;
    width:200px;
    position:absolute;
    top:0;
    left:0;
    background:#090;
}
</style>
<div id="div1"><div style="width:1000px;"></div><div id="div2"><div>2</div></div></div>

Как сделать так чтобы при скролле на мобильном в левую сторону зеленый (div1) блок не смещался влево а так и оставался над синим (div2) блоком?

Сейчас так:


А надо чтобы было так:

Comments

[Softlink]

Так?

Answer 1

[Ethrynto]

Для синей укажи position: relative, для зеленой position: sticky